Error Handling Mechanism while Http Request (REST API) angular2

Question

I am making some REST call (using HTTP request) in angular2.As depend on condition requests are of type GET,POST,PUT,DELETE. Everything works fine for me i am using the below method to make request using seprate service file and class (component class) file.

* service.ts

PostRequest(url,data){
this.headers = new Headers();
this.headers.append("Content-Type", 'application/json');

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

return this.http.request(new Request(this.requestoptions))
    .map((res: Response) => {
        if (res) {
            if(res.status == 201){ 
                return [{ status: res.status, json: res.json }]    
            }
            else if(res.status != 201){ 
                return [{ status: res.status, json: null }]
            }
        }
        // i want to handle error here but how i don't know
    }); 
}

component_class.ts

this.base_path_service.PostRequest(url_postSection, data)
.subscribe(res=> {
   if (res[0].status == 201) {  //some stuff here..... }
});

Now come to question, my Question is

How can i handle error occured in the http,
i know next,error,oncomplete methods of subscribe but is it possible to handle the error at the time of mapping observable i.r return this.http.request(new Request(this.requestoptions)) .map( //is it possible to handle error here instead at the time of subscribe)
i want to get notify to user depends on status code(201,200,204 etc...), so i want to write code once i.e at the time of .map instead of writing code agagin and again at the time of subscribe

if any another approach is good for error handling while HTTP please post it as answer with example.

Thierry Templier · Accepted Answer · 2016-03-18 06:44:02Z

3

You can leverage the catch operator to handle errors:

return this.http.request(new Request(this.requestoptions))
    .map((res: Response) => {
        if (res) {
            if(res.status == 201){ 
                return [{ status: res.status, json: res.json }]    
            }
            else if(res.status != 201){ 
                return [{ status: res.status, json: null }]
            }
        }
    }).catch(error) => {
      // Do something
      // Observable.throw(new Error('some error');
    }); 
}

In fact when an error occurs, the registered callback un the map operator won't be called.

answered Mar 18, 2016 at 6:44

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

6 Comments

Pardeep Jain Over a year ago

well i had tried as you post answer, but now angular throws error Observable is not defined , now if i handle this error in the subscribe's err callback function block it handled it think but i want to handle the error in catch block only, i dont want to send reponse in subscribe block when error encounter what should i do ?

Thierry Templier Over a year ago

You need to import the Observable class: import {Observable} from 'rxjs/Rx';. For your use case, don't throw from the observable class...

Pardeep Jain Over a year ago

i have return the status of error from catch block to subscribe now getting error ` result.subscribe is not a function` from Rxjs

Pardeep Jain Over a year ago

Found the error, whenever i return error.status angular throws error named as result.subscribe is not a function but when i tried same using observable.throw(new error(error.status)) it works fine, did't know the reasons why but thats occured. btw thanks for your time.

Thierry Templier Over a year ago

You should return an observable instead of a raw value: "Observable.of(error.status);". Great if you found the solution to your problem ;-)

|

Collectives™ on Stack Overflow

Error Handling Mechanism while Http Request (REST API) angular2

* service.ts

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

* service.ts

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related