通常希望有默认超时（例如 30 秒），它将应用于所有请求，并且可以为特定的更长请求（例如 600 秒）覆盖。
据我所知，在Http 服务中没有指定默认超时的好方法。
在HttpClient 服务中解决这个问题的方法是什么？如何为所有传出请求定义默认超时，可以为特定请求覆盖？
【问题讨论】：
.timeout(...)，而不是默认情况下。
标签： angular angular4-httpclient
看来，如果不扩展 HttpClientModule 类，拦截器与相应请求进行通信的唯一预期方式是 params 和 headers 对象。
由于超时值是标量，它可以安全地作为自定义标头提供给拦截器，可以通过 RxJS timeout 运算符决定是默认超时还是特定超时：
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));
}
}
这可以在您的应用模块中进行配置，例如：
providers: [
[{ provide: HTTP_INTERCEPTORS, useClass: TimeoutInterceptor, multi: true }],
[{ provide: DEFAULT_TIMEOUT, useValue: 30000 }]
],
然后使用自定义 timeout 标头完成请求
http.get('/your/url/here', { headers: new HttpHeaders({ timeout: `${20000}` }) });
由于标头应该是字符串，所以应该先将超时值转换为字符串。
这里是a demo。
感谢@RahulSingh 和@Jota.Toledo 提出了将拦截器与timeout 一起使用的想法。
【讨论】：
.timeout(defaultTimeout) 操作符链接，就不可能“取消”它并与.timeout(customTimeout) 链接。这可能可以通过子类化 Observable 来实现，但它也很麻烦和脆弱。希望有一天这会在 HttpClient 本身中得到解决。 AngularJS $http 有超时选项，效果很好。
作为对其他答案的补充，请注意，如果您在开发机器上使用 proxy config，代理的默认超时为 120 秒（2 分钟）。对于更长的请求，您需要在配置中定义更高的值，否则这些答案都不起作用。
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"timeout": 360000
}
}
【讨论】：
您可以创建一个全局拦截器，其基本超时值如下：
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';
@Injectable()
export class AngularInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req).timeout(30000, Observable.throw("Request timed out"));
// 30000 (30s) would be the global default for example
}
}
之后你需要在你的根模块的 providers 数组中注册这个可注入对象。
棘手的部分是覆盖特定请求的默认时间（增加/减少）。暂时不知道怎么解决。
【讨论】：
使用新的 HttpClient 你可以尝试这样的事情
@Injectable()
export class AngularInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req).timeout(5000).do(event => {}, err => { // timeout of 5000 ms
if(err instanceof HttpErrorResponse){
console.log("Error Caught By Interceptor");
//Observable.throw(err);
}
});
}
}
为传递的next.handle(req) 添加超时。
在 AppModule 中像这样注册
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [
[ { provide: HTTP_INTERCEPTORS, useClass:
AngularInterceptor, multi: true } ]
],
bootstrap: [AppComponent]
})
export class AppModule {
}
【讨论】：