Angular 2 manipulate/read http response like ng1 httpInterceptors

Question

I am searching for the possibility to inspect each http response data to search for some Messages I want to show or to see wich 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 failture
responseError: function(rejection) {
     if(rejection.data.message) {
        notificationHandlerFactory.addMessage(rejection.data.message);
     }
     return $q.reject(rejection);
}

// On response failture
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 ans 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...');
        });
}

}

Possible duplicate of [What is httpinterceptor equivalent in angular2?](http://stackoverflow.com/questions/35498456/what-is-httpinterceptor-equivalent-in-angular2) — Estus Flask, Oct 19 '16 at 20:49

score 0 · Accepted Answer · answered Oct 20 '16 at 19:41

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...');
    });
}

Angular 2 manipulate/read http response like ng1 httpInterceptors

1 Answers1