angularangular2-services

Angular 2 manipulate/read http response like ng1 httpInterceptors


I am searching for the possibility to inspect each http response data to search for some Messages I want to show or to see which response status the current response has. That was very easy in ng1 but I can't find a solution

in ng1 I can do the following

...
// On response success
response: function(response) {
     if(response.data.message) {
        notificationHandlerFactory.addMessage(response.data.message);
     }
     return response || $q.when(response);
},

// On response failure
responseError: function(rejection) {
     if(rejection.data.message) {
        notificationHandlerFactory.addMessage(rejection.data.message);
     }
     return $q.reject(rejection);
}

// On response failure
responseError: function (rejection) {
    if (rejection.status === 500) {
          console.log("Server Error 500");
          console.log(rejection.data);
    }
    return $q.reject(rejection);
}

how is something like this possible in Ng2 without editing every single http Call. The Only example I've found show how to manipulate the Request Headers, but not the showing into the response.

Most examples only show how manipulate the Headers but I need to Inspect the Response before the service itself gets the Data.

I've found something like this, but I don't know where and how to get the rejection or response Data.

    @Injectable()
    export class CustomHttp extends Http {
      constructor(backend: ConnectionBackend,
        defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
      }

     request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        console.log('Before the request...');
        return super.request(url, options)
            .catch((err) => {
                console.log('On received an error...');
                return Observable.throw(err);
            })
            .finally(() => {
                console.log('After the request...');
        });
    }

      get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        console.log('Before the request...');
        return super.get(url, options)
            .catch((err) => {
                console.log('On received an error...');
                return Observable.throw(err);
            })
            .finally(() => {
                console.log('After the request...');
        });
    }

      post(url: string, body: any, options?: RequestOptionsArgs): Observable<any> {
        console.log('Before the request...');
        return super.post(url, body, options)
            .catch((err: any): any => {
                if (err.status === 400 || err.status === 422) {
                    return Observable.throw(err);
                } else {
                    //this.errorService.notifyError(err);
                    return Observable.empty();
                }
            })
            .finally(() => {
                console.log('After the request...');
            });
    }

}

Solution

  • with the help of the "map" Observable I could see the response data and work with it.

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        //console.log('Before the request...');
        return super.request(url, options).map(res => {
                console.log(res.json());
                return res;
            })
            .catch((err) => {
                console.log('On received an error...');
                return Observable.throw(err);
            })
            .finally(() => {
                console.log('After the request...');
        });
    }
    
    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        //console.log('Before the request...');
        return super.get(url, options).map(res => {
                console.log(res.json());
                return res;
            })
            .catch((err) => {
                console.log('On received an error...');
                return Observable.throw(err);
            })
            .finally(() => {
                console.log('After the request...');
        });
    }