85

通常希望有默认超时（例如 30 秒），它将应用于所有请求，并且可以为特定的较长请求（例如 600 秒）覆盖。

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

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

4

4 回答 4

167

似乎在不扩展类的情况下，拦截器与HttpClientModule相应请求进行通信的唯一预期方式是对象。paramsheaders

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

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}` }) });

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

这是一个演示。

感谢@RahulSingh 和@Jota.Toledo 提出了将拦截器与timeout.

于 2017-08-31T16:20:20.193 回答
22

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

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "timeout": 360000
  }
}
于 2019-09-09T21:46:21.733 回答
16

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

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 数组中注册这个可注入的。

棘手的部分是覆盖特定请求的默认时间（增加/减少）。目前我不知道如何解决这个问题。

于 2017-08-29T14:01:03.740 回答
15

使用新的 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 {
}
于 2017-08-29T12:35:56.120 回答