How to deal with http status codes other than 200 in Angular 2

Question

Right now the way I do http requests (borrowed from this answer) is this:

POST(url, data) {
        var headers = new Headers(), authtoken = localStorage.getItem('authtoken');
        headers.append("Content-Type", 'application/json');

        if (authtoken) {
        headers.append("Authorization", 'Token ' + authtoken)
        }
        headers.append("Accept", 'application/json');

        var requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: this.apiURL + url,
            headers: headers,
            body: JSON.stringify(data)
        })

        return this.http.request(new Request(requestoptions))
        .map((res: Response) => {
            if (res) {
                return { status: res.status, json: res.json() }
            }
        });
    }

This works fine, except for the fact that angular2 will fail if the status code returned is anything else than 200. For example, if a user wants to post something and the server returns 400, angular 2 will throw the exception:

uncaught exception: [object Object]

How can I avoid this? I'd like to handle these status codes in my app in order to enhance user experience (show errors, etc)

https://angular.io/guide/http#handling-request-errors – dota2pro Aug 19 '21 at 11:53 — dota2pro, Aug 19 '21 at 11:53

Pardeep Jain · Accepted Answer · 2016-05-27T05:41:06.550

74

Yes you can handle with the catch operator like this and show alert as you want but firstly you have to import Rxjs for the same like this way

import {Observable} from 'rxjs/Rx';

return this.http.request(new Request(this.requestoptions))
            .map((res: Response) => {
                if (res) {
                    if (res.status === 201) {
                        return [{ status: res.status, json: res }]
                    }
                    else if (res.status === 200) {
                        return [{ status: res.status, json: res }]
                    }
                }
            }).catch((error: any) => {
                if (error.status === 500) {
                    return Observable.throw(new Error(error.status));
                }
                else if (error.status === 400) {
                    return Observable.throw(new Error(error.status));
                }
                else if (error.status === 409) {
                    return Observable.throw(new Error(error.status));
                }
                else if (error.status === 406) {
                    return Observable.throw(new Error(error.status));
                }
            });
    }

also you can handel error (with err block) that is throw by catch block while .map function,

like this -

...
.subscribe(res=>{....}
           err => {//handel here});

Update

as required for any status without checking particluar one you can try this: -

return this.http.request(new Request(this.requestoptions))
            .map((res: Response) => {
                if (res) {
                    if (res.status === 201) {
                        return [{ status: res.status, json: res }]
                    }
                    else if (res.status === 200) {
                        return [{ status: res.status, json: res }]
                    }
                }
            }).catch((error: any) => {
                if (error.status < 400 ||  error.status ===500) {
                    return Observable.throw(new Error(error.status));
                }
            })
            .subscribe(res => {...},
                       err => {console.log(err)} );

edited May 27 '16 at 05:41

answered May 05 '16 at 14:04

Pardeep Jain

84,110
37
165
215

Is it possible to not have to write every status code as a condition? As in just return the status, and then my components can determine what to do with those status codes. – Sebastian Olsen May 05 '16 at 14:11
yes you can just return the error without checking status that depends on you how you want to handel the error block. – Pardeep Jain May 05 '16 at 14:12
Could you edit that in? Having a hard time trying to do that with your existing example. – Sebastian Olsen May 05 '16 at 14:14
i have updated my answer check it once @SebastianOlsen – Pardeep Jain May 05 '16 at 14:21
This seems to log into the console, which is not what I am looking for. I just want it to return the status code, without throwing an error in the console. – Sebastian Olsen May 05 '16 at 14:27
than just use `err.status` simply . – Pardeep Jain May 05 '16 at 14:31
1

Seems like using the subscribe method worked for me. Thanks! – Sebastian Olsen May 05 '16 at 14:35
@PardeepJain, are there no constants other than using the numerical values? e.g. springs HttpStatus.OK or HttpStatus.BAD_REQUEST (org.springframework.http.HttpStatus)? – Artanis Zeratul Sep 11 '18 at 05:25
@ArtanisZeratul yes there may be, you need to customise accordingly. – Pardeep Jain Sep 13 '18 at 09:56
sorry @PardeepJain, there is actually a library for that already. its http-status-codes, you can check it from here: https://www.npmjs.com/package/http-status-codes – Artanis Zeratul Sep 25 '18 at 23:52
have a scenario that the call is success and 'res' is empty; then my 'res.status' is undefined. @PardeepJain – Johnsackson Feb 14 '19 at 08:31
@Johnsackson Now we have option for interceptor , that would be great if you want to use in such scenarios – Pardeep Jain Feb 14 '19 at 09:51
better to use catchError in pipe for errors – Mohsin Younas Nov 28 '20 at 15:05

score 0 · Answer 2 · answered Feb 28 '19 at 17:34

Include required imports and you can make ur decision in handleError method Error status will give the error code

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import {Observable, throwError} from "rxjs/index";
import { catchError, retry } from 'rxjs/operators';
import {ApiResponse} from "../model/api.response";
import { TaxType } from '../model/taxtype.model'; 

private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
  // A client-side or network error occurred. Handle it accordingly.
  console.error('An error occurred:', error.error.message);
} else {
  // The backend returned an unsuccessful response code.
  // The response body may contain clues as to what went wrong,
  console.error(
    `Backend returned code ${error.status}, ` +
    `body was: ${error.error}`);
}
// return an observable with a user-facing error message
return throwError(
  'Something bad happened; please try again later.');
  };

  getTaxTypes() : Observable<ApiResponse> {
return this.http.get<ApiResponse>(this.baseUrl).pipe(
  catchError(this.handleError)
);
  }

How to deal with http status codes other than 200 in Angular 2

2 Answers2

Update

Linked