How to handle HTTP errors in API service and return response through Observable only in case of success?

Question

In my Angular2 app I have an api.service with method sendRequest that should do following:

Sends request to the server
Returns promise to the caller (I want callers to get success responses only)
If error occured handle the error localy (navigate user to login or show a popup)

I implemented it using Promise:

sendRequest(method: string, url: string, data: any) : Promise<any> {
    return this.http.request(method, url, {
        body: data,
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Authorization': 'bearer ' + token,
            'Content-Type': 'application/json;charset=UTF-8'
        }
    }).toPromise().catch((res) => this.handleError(res));
}

handleError(response: any) {
    if (response.status === 401 || response.status === 403) {
        this.tokenService.deleteToken();
        this.router.navigate(['login']);
    }
    // Show popup etc.
    ...
}

I'd like to replace promise by observable:

sendRequest(method: string, url: string, data: any) : Observable<any> {...}

Please advise how to do that. Thank you.

EDIT 1: I found examples that handled response and then passed some result to the observer. That's not what I need. If error occurs the observer shouldn't be notified at all. Observers should be notified only if a successful response arrived. If error occurs it should be processed inside api.service only.

Are you using httpClient module? – Anuradha Gunasekara May 23 '18 at 09:26 — Anuradha Gunasekara, May 23 '18 at 09:26

score 1 · Answer 1 · answered May 23 '18 at 09:31

please see below -

sendRequest(method: string, url: string, data: any) : Observable<any>{
    return this.http.request(method, url, {
        body: data,
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Authorization': 'bearer ' + token,
            'Content-Type': 'application/json;charset=UTF-8'
        }
    }).map( ( res ) => {
      return res || {};
    } )
    .catch( this.handleError );
}



handleError(response: any) {
    if (response.status === 401 || response.status === 403) {
        this.tokenService.deleteToken();
        this.router.navigate(['login']);
    }
    // Show popup etc.
    ...
}

score 0 · Answer 2 · answered May 23 '18 at 09:26

http.request returns an Observable by default, but you are converting it to a Promise with .toPromise()

Simply change the signature of the function to return Observable<any> and remove the part where you convert the Observable to a Promise (.toPromise().catch((res) => this.handleError(res))).

You'll also need to change the way you listen to the response (you'll most likely have a then where you invoke your service method, you need to change that to a subscribe, which is essentially the equivalent version for Observables).

See this answer for a detailed explanation on how to properly catch exceptions while using Observables.

score 0 · Accepted Answer · answered May 23 '18 at 09:39

sendRequest(method: string, url: string, data: any) : Observable<any> {
    return this.http.request(method, url, {
        body: data,
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Authorization': 'bearer ' + token,
            'Content-Type': 'application/json;charset=UTF-8'
        }
    }).map((response: Response) => <any>response.json()).catch(this.handleError);
}

handleError(response: any) {
    if (response.status === 401 || response.status === 403) {
        this.tokenService.deleteToken();
        this.router.navigate(['login']);
    }
    // Show popup etc.
    ...
}

//get response like below
  this.yoursevice.sendRequest(resdata)
        .subscribe((resdata) => {}, 
(error) => {
            this.statusMessage =
                'Problem with the service. Please try again after sometime';
            console.error(error);
        }););

How to handle HTTP errors in API service and return response through Observable only in case of success?

3 Answers3