Angular 2 : extend Response class

Question

我是 Angular 2 的新手，我想扩展 Response 类。 基本上我想做的是，对于每个响应(在返回调用请求的对象之前)，我想检查响应状态并对其执行某些操作。例如，如果响应状态为 401，则导航到登录屏幕。

这是我到目前为止所拥有的:

export class MyResponse extends Response {
  constructor(responseOptions: ResponseOptions) {
    super(responseOptions);
  }

我是我的 Boot :

provide(Response, {useClass: MyResponse}),

运行此程序时，我得到:

Uncaught TypeError: Cannot read property 'getOptional' of undefined_runAppInitializers @ application_ref.js:224PlatformRef_._initApp @ application_ref.js:205PlatformRef_.application @ application_ref.js:153bootstrap @ browser.js:101(anonymous function) @ app.js:59DecorateConstructor @ Reflect.js:536decorate @ Reflect.js:98__decorate @ app.bundle.js:3181(anonymous function) @ app.ts:13(anonymous function) @ app.ts:56__webpack_require__ @ bootstrap e77d89d…:19(anonymous function) @ bootstrap e77d89d…:39__webpack_require__ @ bootstrap e77d89d…:19(anonymous function) @ bootstrap e77d89d…:39(anonymous function) @ bootstrap e77d89d…:39(anonymous function) @ travesseyJwtHttp.ts:46__webpack_require__ @ bootstrap e77d89d…:19(anonymous function) @ app.ts:7__webpack_require__ @ bootstrap e77d89d…:19(anonymous function) @ bootstrap e77d89d…:39__webpack_require__ @ bootstrap e77d89d…:19(anonymous function) @ bootstrap e77d89d…:39(anonymous function) @ bootstrap e77d89d…:39 `

有更好的方法来做我想做的事情吗？

Answer 1

事实上，在查看了 XHRConnection 类的实现(参见 https://github.com/angular/angular/blob/master/modules/angular2/src/http/backends/xhr_backend.ts#L59 )后，Response 无法通过依赖注入(inject)进行更改，因为它是收到响应时直接实例化。

如果您想拦截响应，我认为该方法是扩展 Http 对象本身并利用 catch 运算符:

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

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    console.log('request...');
    return super.request(url, options).catch(res => {
      // do something
    });        
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    console.log('get...');
    return super.get(url, options).catch(res => {
      // do something
    });
  }
}

可以按如下所述注册 CustomHttp 类:

bootstrap(AppComponent, [HTTP_PROVIDERS,
    new Provider(Http, {
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),
      deps: [XHRBackend, RequestOptions]
  })
]);

如果在此级别发生 401 错误，您可以在为 catch 运算符提供的回调中“捕获”它们。