Angular 2操纵/读取http响应,如ng1 httpInterceptors

时间:2016-10-19 20:18:47

标签: angular angular2-services

我正在寻找检查每个 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中实现这样的功能。我发现的唯一示例显示了如何操作请求标题,但不显示响应中的显示。

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

我发现了类似的内容,但我不知道如何获取拒绝或响应数据。

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

}

1 个答案:

答案 0 :(得分:0)

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