Angular 2 manipulate/read 像 ng1 httpInterceptors 这样的 http 响应

Question

我正在寻找检查每个 http 响应数据的可能性 以搜索我想显示的一些消息或查看当前响应的响应状态。这在 ng1 中非常简单，但我找不到解决方案

在 ng1 中我可以执行以下操作

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

在不编辑每个 http 调用的情况下，在 Ng2 中怎么可能发生这样的事情。我发现的唯一示例显示了如何操作请求 Headers，但没有显示在响应中。

大多数示例仅显示如何操作 Headers 但我需要在服务本身获取数据之前检查响应。

我找到了类似的东西，但我不知道在哪里以及如何获得拒绝或响应数据。

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

}

Answer 1

在 "map" Observable 的帮助下，我可以看到响应数据并使用它。

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 像 ng1 httpInterceptors 这样的 http 响应

Angular 2 manipulate/read http response like ng1 httpInterceptors

angular

angular2-services