How to detect http status code in angular 2

Question

I have a loadSize() func in my angular2 project and it calls a getTotalNumberCampaigns() in my service and return a observable. and I subscribe to this observable to get the result.

this is my loadSize()

   loadSize() {
    this.campaignsService.getTotalNumberCampaigns().subscribe(value => {//async call
        this.campaignSize = value;
    }, (err)=> {}

    );
}

let's say there is an error with my getTotalNumberCampaigns() and it will fire the err=>{} in subscribe. My question is how do i know what the httpreponse status code is so that i can direct the user to take different action (if it is connection failed(502), the user should refresh. if it is access_token expiry(500), the page should be jump to login page)

this is my getTotalNumberCampaigns in service class

 getTotalNumberCampaigns(): Observable<number> {
    return this.http.get(`${this.apiUrl}/Count`, { headers: this.headers })
        .map<number>(res => <number>res.json())
}

it should be on err.status, check [angular response](https://angular.io/docs/ts/latest/api/http/Response-class.html) — Abdulrahman Alsoghayer, Mar 01 '16 at 05:51
My getTotalNumberCampaigns() function returns a observable of NUMBER type. don't know if error happened,does it still return an observable of number? should I change it to Observable? — Bob Zhang, Mar 01 '16 at 06:00
No you don't need to change the observable type. The observable type will not change. — Abdulrahman Alsoghayer, Mar 01 '16 at 06:38
you could change the error callback to : (err:any) => console.log(err.status) — Abdulrahman Alsoghayer, Mar 01 '16 at 07:09
Thanks, but i got 200 instead of 500. it should be 500 (access_token expiry). see my latest picture — Bob Zhang, Mar 01 '16 at 07:13
The error in your picture is caused by a preflight request (option) request that is made before your get request.So it's not thrown by the same observable returned from http.get(). It is a [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) related error, it's not (access_token) error. You should add the header : (Access-Control-Allow-Origin: *) to your server. — Abdulrahman Alsoghayer, Mar 01 '16 at 07:26
everything works fine before my access_token expired. any idea how to catch the 500 error in my frontend? — Bob Zhang, Mar 01 '16 at 07:36
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104971/discussion-between-abdulrahman-and-bob-zhang). — Abdulrahman Alsoghayer, Mar 01 '16 at 07:37
This: http://stackoverflow.com/a/33942337/3582411 helped me might consider takinga look at it — Floris, Apr 05 '16 at 12:07

score 6 · Answer 1 · edited Mar 01 '16 at 08:36

6

The returned error corresponds to the response itself, so you can use its status attribute to get the status code:

loadSize() {
    this.campaignsService.getTotalNumberCampaigns().subscribe(value => {//async call
        this.campaignSize = value;
    }, (err: any) => { console.log(err.status); console.log(err);}

    );
}

edited Mar 01 '16 at 08:36

Bob Zhang

841
3
10
17

answered Mar 01 '16 at 06:31

Thierry Templier

198,364
44
396
360

Strange. Do you use the catch operator previously in your data flow? The response object is provided when an error occurs. But you're free to catch it with this operator and use Objectable.throw to throw another one then. Is it your case? – Thierry Templier Mar 01 '16 at 08:01
I will start a new question since for this topic the question has already solved – Bob Zhang Mar 01 '16 at 08:23
1

http://stackoverflow.com/questions/35718175/why-my-error-in-subscirbe-err-here-is-different-from-the-error-in-bro – Bob Zhang Mar 01 '16 at 08:43

score 0 · Answer 2 · answered Jun 09 '16 at 14:34

0

In your loadSize method

loadSize() {
    this.campaignsService.getTotalNumberCampaigns().subscribe(value => {//async call
        this.campaignSize = value;
    }, (err)=> {}

    );
}

you should get the respone code by

value.status

answered Jun 09 '16 at 14:34

Rambou

968
9
22

How to detect http status code in angular 2

2 Answers2