为了账号安全,请及时绑定邮箱和手机立即绑定

什么是angular2中的httpinterceptor等效项?

/ 猿问

什么是angular2中的httpinterceptor等效项?

繁星点点滴滴 2019-11-13 14:50:14

在angularjs中,我们有http拦截器


$httpProvider.interceptors.push('myHttpInterceptor');

通过它,我们可以连接到所有http调用,并显示或隐藏加载栏,进行日志记录等。


什么是angular2中的等价物?


查看完整描述

3 回答

?
潇湘沐

正如@Günter指出的那样,无法注册拦截器。您需要扩展Http该类,并将拦截处理放在HTTP调用周围


首先,您可以创建一个扩展的类Http:


@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

    });

  }

}

并按照以下说明进行注册:


bootstrap(AppComponent, [HTTP_PROVIDERS,

    new Provider(Http, {

      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),

      deps: [XHRBackend, RequestOptions]

  })

]);

在request和requestError种类可以调用目标方法之前加入。


对于response一个,你需要插入一些异步处理到现有的加工链。这取决于您的需要,但是您可以使用flatMapObservable的运算符(例如)。


最后responseError,您需要catch在目标呼叫上呼叫接线员。这样,当响应中发生错误时,您将收到通知。


查看完整回答
反对 回复 2019-11-13
?
蝴蝶不菲

HttpClientAngular 4.3.0中引入的新模块支持拦截器https://github.com/angular/angular/compare/4.3.0-rc.0...4.3.0


feat(common):新的HttpClient API HttpClient是现有Angular HTTP API的改进,与Angular HTTP API一起存在于单独的软件包@ angular / common / http中。这种结构确保现有的代码库可以缓慢迁移到新的API。


新的API大大改善了旧API的人体工程学和功能。新功能的部分列表包括:


类型化的同步响应正文访问,包括对JSON正文类型的支持

JSON是假定的默认值,不再需要显式解析

拦截器允许将中间件逻辑插入管道中

不可变的请求/响应对象

请求上传和响应下载的进度事件

请求后验证和基于刷新的测试框架

原版的


Angular2还没有拦截器。你可以去继承Http,XHRBackend,BaseRequestOptions或任何其他相关的类(至少在打字稿和达特(不知道纯JS)的。


查看完整回答
反对 回复 2019-11-13
?
SMILET

此存储库中有一个Http @ angular / core-like服务的实现:https : //github.com/voliva/angular2-interceptors


您只需在引导程序上声明该服务的提供程序,然后添加所需的所有拦截器,它将对所有组件可用。


import { provideInterceptorService } from 'ng2-interceptors';


@NgModule({

  declarations: [

    ...

  ],

  imports: [

    ...,

    HttpModule

  ],

  providers: [

    MyHttpInterceptor,

    provideInterceptorService([

      MyHttpInterceptor,

      /* Add other interceptors here, like "new ServerURLInterceptor()" or

         just "ServerURLInterceptor" if it has a provider */

    ])

  ],

  bootstrap: [AppComponent]

})


查看完整回答
反对 回复 2019-11-13

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信