默认和特定请求超时

时间:2017-08-29 12:15:52

标签: angular angular4-httpclient

通常,我们希望默认超时(例如30秒)将应用于所有请求,并且可以覆盖特定的更长请求(例如600秒)。

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

HttpClient服务中处理此问题的方法是什么?如何为所有传出请求定义默认超时,可以覆盖特定的超时?

4 个答案:

答案 0 :(得分:67)

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

由于超时值是标量,因此可以安全地将其作为自定义标头提供给拦截器,在此可以确定是否应通过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 = Number(req.headers.get('timeout')) || this.defaultTimeout;

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

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

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

然后使用自定义timeout标题

完成请求
http.get(..., { headers: new HttpHeaders({ timeout: `${20000}` }) });

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

这是a demo

致信@RahulSingh和@ Jota.Toledo建议使用timeout拦截器的想法。

答案 1 :(得分:10)

使用新的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 {
}

答案 2 :(得分:9)

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

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数组中注册此注入。

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

答案 3 :(得分:3)

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

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