Angular 2 HTTP响应拦截器 [英] Angular 2 HTTP response interceptor

问题描述

在Angular 1中，全局处理HTTP响应状态是通过 $ httpProvider 完成的：

In Angular 1, globally handling an HTTP response status is done with $httpProvider:

angular.module('app', [])
    .service('httpResponseInterceptor', ['$q', function ($q) {
        this.response = function (response) {
            if (response.status === 418) {
                // do some stuff here
            }
            return response || $q.when(response);
        };
        this.responseError = function (response) {
            if (response.status === 418) {
                // do some stuff here
            }
            return $q.reject(response);
        };
    }])
    .config(['$httpProvider', function ($httpProvider) {
        // do routing, etc.

        $httpProvider.interceptors.push('httpResponseInterceptor');
    }]);

在Angular 2中，它完成了 Http 取而代之的是：

import { Injectable } from '@angular/core';
import {
    Http,
    Response,
    Request,
    RequestOptions,
    RequestOptionsArgs,
    XHRBackend
} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';

@Injectable()
export class HttpInterceptor extends Http {

  constructor(xhrBackend: XHRBackend, requestOptions: RequestOptions) {
    super(xhrBackend, requestOptions);
  }

  private catchErrors() {
    return (response: Response) => {
      if (response.status === 418) {
            // do some stuff here
      }
      return Observable.throw(response);
    };
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    return super.request(url, options)
          .catch(this.catchErrors());
  }
}

...并将其包含在<$ c中$ c> app.module.ts ：

...and by including this in app.module.ts:

providers: [
    { provide: Http, useClass: HttpInterceptor }
]

参见此stackoverflow答案和这个要点供参考。

See this stackoverflow answer and this gist for reference.

但是，我收到上述Angular 2代码的错误：

However, I am getting this error with the above Angular 2 code:

无法实例化循环依赖！ Http：在NgModule AppModule

Cannot instantiate cyclic dependency! Http: in NgModule AppModule

推荐答案

此配置对我有用;我正在使用Angular 2 v2.4.1：

This configuration worked for me; I'm using Angular 2 v2.4.1:

app.module.ts

app.module.ts

{
    provide: Http,
    useFactory: (backend: XHRBackend, options: RequestOptions) => {
        return new HttpInterceptor(backend, options);
    },
    deps: [XHRBackend, RequestOptions]
}

HttpInterceptor.ts

HttpInterceptor.ts

import { Injectable } from '@angular/core';
import {
    Http,
    ConnectionBackend,
    RequestOptions,
    RequestOptionsArgs,
    Request,
    Response,
    Headers
} from '@angular/http';

import { Observable } from 'rxjs/Rx';

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

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.request(url, options));
    }

   ...
}

这篇关于Angular 2 HTTP响应拦截器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！