如何在Angular2中创建拦截器？

14 浏览
0 Comments

如何在Angular2中创建拦截器？

我正在使用Angular2构建我的第一个较大的应用程序，我想知道如何构建一个可以替代Angular1拦截器的东西？我搜索了互联网，发现我可以创建一个类，这个类与Http类几乎相同。然而，我不知道如何实现我最感兴趣的两个功能：拦截请求的错误和为所有请求添加一个头部。欢迎提供任何指导！

0

1 答案

0 Comments

在Angular2中创建拦截器的原因是为了能够在请求之前和之后拦截HTTP请求，并对其进行处理。通过创建一个继承自Http的自定义类，可以实现这个目的。下面是代码示例：

export class CustomHttp extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }
  request(url: string | Request, options?: RequestOptionsArgs): Observable {
    console.log('request...');
    return super.request(url, options).catch(res => {
      // 在这里处理异常
    });        
  }
  get(url: string, options?: RequestOptionsArgs): Observable {
    console.log('get...');
    return super.get(url, options).catch(res => {
      // 在这里处理异常
    });
  }
}

然后，需要将这个类注册到Angular2的依赖注入系统中，以便在应用中使用。在RC4版本之前可以使用以下代码进行注册：

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

在RC4版本之后，可以使用以下代码进行注册：

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

这样就可以拦截HTTP请求了。如果需要处理响应，可以在CustomHttp类中重写相应的方法。如果想要在订阅中抛出错误，需要在catch块中返回Observable.throw(...)。希望这个回答对你有帮助！

0