共计 1547 个字符,预计需要花费 4 分钟才能阅读完成。
本文介绍 Angular HTTP 申请 timeout 的一种实现思路。的
如果不扩大 HttpClientModule
类,拦截器与相应申请进行通信的惟一预期形式是参数和标头对象。
因为超时值是标量 (Scalar
) 的,它能够平安地作为自定义标头提供给拦截器,能够通过 RxJS 超时运算符 (timeout Operator) 来决定是默认超时还是特定超时。
代码片段如下:
import {Inject, Injectable, InjectionToken} from '@angular/core';
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs';
import {timeout} from 'rxjs/operators';
export const DEFAULT_TIMEOUT = new InjectionToken<number>('defaultTimeout');
@Injectable()
export class TimeoutInterceptor implements HttpInterceptor {constructor(@Inject(DEFAULT_TIMEOUT) protected defaultTimeout: number) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {const timeoutValue = req.headers.get('timeout') || this.defaultTimeout;
const timeoutValueNumeric = Number(timeoutValue);
return next.handle(req).pipe(timeout(timeoutValueNumeric));
}
}
下面代码里,timeout 是 rxjs 提供的一个 Operator.
DEFAULT_TIMEOUT
这个 injection token, 以及 HTTP Interceptor 的提供形式,定义在 App Module 中:
providers: [[{ provide: HTTP_INTERCEPTORS, useClass: TimeoutInterceptor, multi: true}],
[{provide: DEFAULT_TIMEOUT, useValue: 30000}]
],
而后,咱们就能够应用上面的代码来调用 HTTPClient,应用自定义的 timeout 值了:
http.get('/your/url/here', { headers: new HttpHeaders({ timeout: `${20000}` }) });
另外,Angular 的 proxy 设置里也容许定义 timeout 值:
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"timeout": 360000
}
}
对于 rxjs 的 timeout Operator 的输出参数,首先须要晓得的是,如果没有给配置提供 with 属性,当满足超时条件时,这个操作符会收回一个 TimeoutError。相同,如果配置了 with 属性,Angular 将应用 with 提供的工厂函数,并将开发人员的订阅切换到其后果。超时条件由 first 和 each 中的设置提供。
第一个属性能够是特定工夫的日期、绝对于订阅点的时间段的数字,也能够被跳过。此属性仅用于查看来自源的第一个值达到的超时条件。来自源的所有后续值的工夫将依据每个提供的时间段进行查看(如果已提供)。
正文完