2021-01-22

最新推荐文章于 2024-12-10 09:03:35 发布

acns

最新推荐文章于 2024-12-10 09:03:35 发布

阅读量151

点赞数

文章标签： angular2 typescript

原文链接：http://plnkr.co/edit/ourxbESwaJ0WCKDbov0n?p=preview

版权

本文介绍了如何在Angular项目中创建自定义HTTP拦截器TimeoutInterceptor，用于设置HTTP请求的默认超时时间和短时请求。通过实例展示了如何使用@Angular/Common/http模块和RxJS的timeout操作符来实现这个功能。

摘要由CSDN通过智能技术生成

app.ts

//our root app component
import {Component, Inject, Injectable, InjectionToken, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {HttpClientModule, HttpHeaders, HttpClient, HTTP_INTERCEPTORS, HttpInterceptor, HttpRequest, HttpHandler} from '@angular/common/http'

import { Observable } from 'rxjs/Observable';
import { TimeoutError } from 'rxjs/util/TimeoutError';
import 'rxjs/add/operator/timeout';

const DEFAULT_TIMEOUT = new InjectionToken<number>('defaultTimeout');
const defaultTimeout = 10000;

@Injectable()
export class TimeoutInterceptor implements HttpInterceptor {
  constructor(@Inject(DEFAULT_TIMEOUT) protected defaultTimeout) {}
  
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const timeout = Number(req.headers.get('timeout')) || this.defaultTimeout;
    req.headers = req.headers.delete('timeout');
    return next.handle(req).timeout(timeout);
  }
}

@Component({
  selector: 'my-app',
  template: ``,
})
export class App {
  name:string;
  constructor(http: HttpClient) {
    http.get('test.json', { headers: new HttpHeaders({ timeout: `${10}` }) })
    .subscribe(null, err => {
      console.log('custom short timeout, err instanceof TimeoutError is %s', err instanceof TimeoutError)
    });

    http.get('test.json', { headers: new HttpHeaders({ timeout: `${20000}` }) })
    .subscribe(console.log('custom long timeout'));

    http.get('test.json')
    .subscribe(console.log('default timeout'));

  }
}

@NgModule({
  imports: [ BrowserModule, HttpClientModule ],
  providers: [
    [{ provide: HTTP_INTERCEPTORS, useClass: TimeoutInterceptor, multi: true }],
    [{ provide: DEFAULT_TIMEOUT, useValue: defaultTimeout }]
  ],  
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}