本文介绍一种AngularHTTP请求超时的实现思路。拦截器在不扩展HttpClientModule类的情况下与相应请求通信的唯一预期方式是参数和标头对象。由于超时值是标量（Scalar），它可以安全地作为自定义标头提供给拦截器，可以通过RxJS超时运算符（timeoutOperator）确定默认超时或特定超时。代码片段如下：import{Inject,Injectable,InjectionToken}from'@angular/core';import{HttpEvent,HttpHandler,HttpInterceptor,HttpRequest}from'@angular/common/http';import{Observable}from'rxjs';从'rxjs/operators'导入{timeout};exportconstDEFAULT_TIMEOUT=newInjectionToken('defaultTimeout');@Injectable()exportclassTimeoutInterceptorimplementsHttpInterceptor{constructor(@Inject(DEFAULT_TIMEOUT)protecteddefaultTimeout:number){}拦截（请求：HttpRequest，下一个：HttpHandler）：Observable>{consttimeoutValue=req.headers.get('timeout')||这个。默认超时；consttimeoutValueNumeric=Number(timeoutValue);返回下一个.handle(req).pipe(timeout(timeoutValueNumeric));}}上面代码中timeout是rxjs提供的一个Operator.DEFAULT_TIMEOUT注入token，在AppModule中定义了提供HTTPInterceptor的方式：providers:[[{provide:HTTP_INTERCEPTORS,useClass:TimeoutInterceptor,multi:true}],[{provide:DEFAULT_TIMEOUT,useValue:30000}]],然后，我们可以使用下面的代码调用带有自定义超时值的HTTPClient：http.get('/your/url/here',{标头：新的HttpHeaders（{超时：`${20000}`}）}）；另外，在Angular的代理设置中也允许定义超时值：{"/api":{"target":"http://localhost:3000","secure":false,"timeout":360000}}关于rxjs的timeoutOperator的入参，首先要知道的是，如果配置没有提供with属性，当超时条件满足时，这个operator会抛出一个TimeoutError。相反，如果配置了with属性，Angular将使用with提供的工厂函数并将开发者的订阅切换到它的结果。超时条件由first和each中的设置提供。第一个属性可以是特定时间的日期、相对于订阅点时间段的数字，或者可以被跳过。此属性仅用于检查来自源的第一个值到达的超时条件。来自源的所有后续值的时间将根据每个提供的时间段（如果提供）进行检查。
