How to handle HTTP response codes in Angular 5+

Question

Looking through the Angular 5+ guidance on making HTTP requests in Services we see the basic patterns appears as follows for a service:

getTasks(taskId: string): Observable<ITask[]> {
  var url = this.baseServiceUrl + 'task/' + taskId;

  this.fetchedTasks = this.http.get<ITask[]>(url);

  return this.fetchedTasks;
}

A component may use it as follows

getTasks(taskId: string): void {
  this.taskService.getTasks(taskId).subscribe(tasks => this.tasks = tasks);
}

Using the above case, how should this be modified to allow us to handle HTTP response codes such as 400, 403, 401, 404, and 5xx.

In short, we need the caller to be aware of faulted outcomes, vs, not found, etc. so they can handle related UI concerns

Your service can use map and catch/catchError to return meaningful status/data back to the caller (component). — Igor
– Igor, Commented Jan 30, 2018 at 21:44

Calidus · Accepted Answer · 2018-01-30 21:44:59Z

3

The simplest way would be to just use the error object from observable. https://xgrommx.github.io/rx-book/content/getting_started_with_rxjs/creating_and_querying_observable_sequences/error_handling.html

getTasks(taskId: string): void {
  this.taskService.getTasks(taskId).subscribe(data => {
        this.tasks = data;
    },
    err => {
        //handle errors here
    });
}

Your other options include overloading the default error handler in angular.

https://angular.io/api/core/ErrorHandler

answered Jan 30, 2018 at 21:44

Calidus

1,4142 gold badges16 silver badges32 bronze badges

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

Comments

Igor · Accepted Answer · 2018-01-30 21:49:59Z

Your service can use catchError to return meaningful status/data back to the caller (component).

import { catchError } from 'rxjs/operators/catchError';
import { _throw } from 'rxjs/observable/throw';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';


getTasks(taskId: string): Observable<ITask[]> {
  var url = this.baseServiceUrl + 'task/' + taskId;

  this.fetchedTasks = this.http.get<ITask[]>(url)
        .pipe(catchError((res: HttpErrorResponse ) => {
                if (res.status === 400) {
                    var someErrorTheCodeNeedsToReturn = something;
                    return _throw(someErrorTheCodeNeedsToReturn);
                }
                return _throw(res.status); // unknown / unexpected error, just rethrow status or do something custom
            }));
  return this.fetchedTasks;
}

David Anthony Acosta · Accepted Answer · 2018-01-30 21:50:37Z

3

I'm not entirely sure with observable, though I imagine it is a similar way. I do it like this:

public getAllInboxMessages(): Promise<Message[]> {
    return this.http.get<Message[]>(url)
        .toPromise()
        .catch(err => this.handleError(err));
}

  public handleError(error: any): Promise<never> {
    if (error.status === 401) {
      //
    } else if (error.status === 400) {
        //
      }
        return Promise.reject(error);
  }

answered Jan 30, 2018 at 21:50

David Anthony Acosta

4,9381 gold badge21 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to handle HTTP response codes in Angular 5+

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related