关于angular：默认和特定请求超时

Default and specific request timeout

通常最好将默认超时(例如30秒)应用于所有请求，并且可以为特定的较长请求(例如600秒)覆盖。

据我所知，没有很好的方法在Http服务中指定默认超时。

在HttpClient服务中解决此问题的方法是什么？如何为所有传出请求定义默认超时，可以为特定请求覆盖默认超时？

似乎没有扩展HttpClientModule类，拦截器与各个请求进行通信的唯一预期方式是params和headers对象。

由于超时值为标量，因此可以安全地将其作为自定义标头提供给拦截器，在拦截器中可以确定它是默认超时还是应通过RxJS timeout运算符应用的特定超时：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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, next: HttpHandler): Observable<HttpEvent> {
const timeoutValue = req.headers.get('timeout') || this.defaultTimeout;
const timeoutValueNumeric = Number(timeoutValue);

return next.handle(req).pipe(timeout(timeoutValueNumeric));
}
}

可以在您的应用模块中进行配置，例如：

1
2
3
4

providers: [
[{ provide: HTTP_INTERCEPTORS, useClass: TimeoutInterceptor, multi: true }],
[{ provide: DEFAULT_TIMEOUT, useValue: 30000 }]
],

然后使用自定义的timeout标头

完成请求

1	http.get('/your/url/here', { headers: new HttpHeaders({ timeout: `${20000}` }) });

由于标头应为字符串，因此应将超时值首先转换为字符串。

这是一个演示。

感谢@RahulSingh和@ Jota.Toledo建议使用与timeout一起使用拦截器的想法。

相关讨论

@ Jota.Toledo我认为单靠可观察性并不能解决问题。一旦将一个可观察对象与拦截器中的.timeout(defaultTimeout)运算符链接在一起，就不可能"取消"它并使用.timeout(customTimeout)进行链接。可以通过将Observable子类化来实现，但这也将是麻烦且脆弱的。希望有一天可以在HttpClient本身中解决此问题。 AngularJS $ http具有超时选项，并且效果很好。
是的，我知道这一点。我试图根据SO答案使用mergeMap和其他运算符实现某些功能，但在其中一种情况下(我认为默认值会被较大的时间覆盖)，我的方法无法正常工作。尽管我不喜欢使用HttpHeader与拦截器进行通信，但我还是会选择您的方法，但是在API的当前状态下，我认为没有更好的方法。
是的，因为没有其他选项可与拦截器进行交互，所以标头看起来就像唯一的标头，并且还不错。至少语义是正确的，头被假定为携带有关请求的信息。希望在将来的版本中可以解决此问题。
此代码无法将超时请求增加到大于30秒。如果将其设置为60秒，则将应用angular的默认30秒
添加超时后，我们是否还从UI向后端发送了任何其他参数？
@ sparsh610我不确定我是否正确理解您，但是请求本身并没有不同。如果服务器未响应，则超时将在指定的时间后强制关闭请求。
@ sparsh610是的，但是仅在服务器允许的情况下。
@estus我正在尝试使用它，因为它似乎可以解决我的所有麻烦，但是我是InjectionToken类的新手，并且遇到错误StaticInjectorError...No provider for InjectionToken defaultTimeout!。我知道这是一个漫长的尝试，但是您有什么想法可以分享为什么会发生吗？
@Lopposed表示您没有将其注册为提供程序，因此无法注入它。参见带有provide: DEFAULT_TIMEOUT ...的部分。
@EstusFlask我只是想给您道具以回答您的问题以及您的昵称。赞美太阳！

作为其他答案的补充，请注意，如果您在开发机上使用代理配置，则代理的默认超时为120秒(2分钟)。对于更长的请求，您需要在配置中定义一个更高的值，否则这些答案都不起作用。

1
2
3
4
5
6
7

{
"/api": {
"target":"http://localhost:3000",
"secure": false,
"timeout": 360000
}
}

相关讨论

您可以使用基本超时值创建全局拦截器，如下所示：

1
2
3
4
5
6
7
8
9
10

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';

@Injectable()
export class AngularInterceptor implements HttpInterceptor {
intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> {
return next.handle(req).timeout(30000, Observable.throw("Request timed out"));
// 30000 (30s) would be the global default for example
}
}

之后，您需要在根模块的providers数组中注册此可注射物。

棘手的部分是要覆盖特定请求的默认时间(增加/减少)。目前，我不知道该如何解决。

使用新的HttpClient，您可以尝试这样的事情

1
2
3
4
5
6
7
8
9
10
11

@Injectable()
export class AngularInterceptor implements HttpInterceptor {
intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> {
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中注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [
[ { provide: HTTP_INTERCEPTORS, useClass:
AngularInterceptor, multi: true } ]
],
bootstrap: [AppComponent]
})
export class AppModule {
}

相关讨论