Angular Observable error handling with async

Question

I have a service that collects data and a component to show it the code is as follows:

books.service:

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {Book} from '../model/book';

@Injectable()
export class BooksService {

  constructor(private http: HttpClient) {
  }

  findAllBooks(): Observable<Book[]> {
    return this.http.get<Book[]>('api/books');
  }

}

list-books.component.ts:

import {Component, OnInit} from '@angular/core';
import {BooksService} from '../../services/books.service';
import {Observable} from 'rxjs/Observable';
import {Book} from '../../model/book';

@Component({
  selector: 'app-list-books',
  templateUrl: './list-books.component.html',
  styleUrls: ['./list-books.component.css']
})
export class ListBooksComponent implements OnInit {

  books: Observable<Book[]>;

  constructor(private booksService: BooksService) {
  }

  ngOnInit() {
    this.books = this.booksService.findAllBooks();
  }
}

list-books.component.html:

<table class="table table-striped table-hover">
  <tr *ngFor="let book of books | async">
    <td>
      {{book.title}}
    </td>
  </tr>
</table>

Now I would like to handle HTTP Errors (e.g. 404). But I don't know how to properly add error handler without adding subscribe function.

What do you want to happen on an error? Retry the request, show a message, show no books? — Andrei Tătar
– Andrei Tătar, Commented Oct 30, 2018 at 11:47
In this example I would just like to return predefined list of books but probably best would be to show message — Pitirus
– Pitirus, Commented Oct 30, 2018 at 12:21
If you want to return some default list, you can do it in the BooksService. If you want to show an error message, you need to subscribe in the controller and handle the error. async pipe doesn't know how you want to handle the error... — Andrei Tătar
– Andrei Tătar, Commented Oct 30, 2018 at 12:29
I solved it. I replaced // handle the errore from @Sachila to of(booksMock) — Pitirus
– Pitirus, Commented Oct 30, 2018 at 12:52

Sachila Ranawaka · Accepted Answer · 2018-10-30 11:46:14Z

5

use the catchError to handle the errors.

import { catchError } from 'rxjs/operators';

findAllBooks(): Observable<Book[]> {
    return this.http.get<Book[]>('api/books').pipe(
      catchError(error =>  // handle the errore)
    )
  }

answered Oct 30, 2018 at 11:46

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pitirus Over a year ago

and if I would like to return a predefined list of Book[] (let's say it's in booksMock variable)?

Pitirus Over a year ago

I solved it. I had to replace // handle the errore with of(booksMock)

Ems Over a year ago

I was doing exactly that, but it doesn't seem to work. I have a MyObjectService class which calls the server to retrieve MyObject, and handles errors with a console.log() and then a toastr. The console.log() is called but the toastr message never shows...

Collectives™ on Stack Overflow

Angular Observable error handling with async

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related