Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

handling server error response along with data in angular 2 using HTTP observable

This is regarding handling server response in angular2
As i understand,
1. server response code 200, 201 etc will make success response
2. while server response 400, 401, 500 etc will make error response
3. if response is success, then it will goto map function, from there we can return the data or modify it. 4. if response is error, then it will go to catch function, from there we will can return observable or throw the observable.

My question is if server returned error response code along with error data, then how to capture that data.

i.e suppose i am sending below data from server
success response
status: 200
msg: "successfully loggedin"

error response
status: 400
msg: "userid and password is wrong"

Here i am able to get or handle success data but not the error data,because in catch function, only error object is getting passed and that error object only contain response code from server, not the response data

return this.http.get('/login')
                        .map( (res: Response) => res.json().data )
                        .catch( (error: any) => {
                            return Observable.throw( new Error("error occured"+error.status));

                        })
like image 870
Vikash Avatar asked Sep 20 '16 11:09

Vikash


People also ask

How does Angular handle HTTP errors?

When the error occurs in the HTTP Request it is intercepted and invokes the catchError . Inside the catchError you can handle the error and then use throwError to throw it to the service. We then register the Interceptor in the Providers array of the root module using the injection token HTTP_INTERCEPTORS .

What is observable in HTTP in Angular?

Angular makes use of observables as an interface to handle a variety of common asynchronous operations. For example: The HTTP module uses observables to handle AJAX requests and responses. The Router and Forms modules use observables to listen for and respond to user-input events.

Why Angular HTTP return observable?

The Angular team has put in a lot of effort to support promises as a fallback for a lot of those features, but under the hood those promises are just converted to observables anyway. By making Http requests observables the Angular team is making async operations in the core consistent with everything elsewhere.


1 Answers

Update:

don't put return in map and catch function.
Below is updated code

return this.http.get('/login')
                .map( ( successRes: Response) => {
                       res.json().data 
                    )}
                .catch( ( errorRes: Response ) => {
                     Observable.throw( errorRes.json().data );
                 })


Original:

Actually solution was very simple, response data itself is attached to first argument, its just like normal response as in the case of success response.

Just needed to add json() call to response error object to convert the json to js object, something like this.

return this.http.get('/login')
                .map( ( successRes: Response) => {
                      return res.json().data 
                    )}
                .catch( ( errorRes: Response ) => {
                    return Observable.throw( errorRes.json().data );
                 })
like image 172
Vikash Avatar answered Sep 29 '22 06:09

Vikash