Question

超时是Web请求无法通过的时间限制。例如，如果我将超时定义为3秒，则在请求数据时Web请求将在超过3秒时被取消。我希望我的网络服务不超过3秒。

我该怎么做？

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';
import { GLOBAL } from '../app.constantes';

@Injectable()
export class AppService{
public url: string;

constructor(
    public _http: HttpClient

){}
getAll(url,method,param): Observable<any>{
    let config={};
    config["timeout"]=3000;
    config["data"]=param ? param: {}; //in case of POST  this is the "data" property, with GET is "params" I believe..
    return this._http.post(url,config);

}

Answer 1

您可以使用rxjs的超时运算符：

return this._http.post(url,config).timeout(3000, new Error('request timeout'));

然后在订阅部分，您可以指定成功结果或错误的操作：

getAll(url,method,param).subscribe(
            data => successFunction(data),
            error => errorFunction(error)
        )

Answer 2

看来，如果不扩展HttpClientModule类，拦截器与各个请求通信的唯一预期方式是params和header对象。

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

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/timeout';

const DEFAULT_TIMEOUT = new InjectionToken<number>('defaultTimeout');
const defaultTimeout = 10000;

@Injectable()
export class TimeoutInterceptor implements HttpInterceptor {
  constructor(@Inject(DEFAULT_TIMEOUT) protected defaultTimeout) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const timeout = Number(req.headers.get('timeout')) || this.defaultTimeout;
    return next.handle(req).timeout(timeout);
  }
}

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

然后使用自定义超时标头

完成请求

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

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

这是demo

HTTP请求超时

2 个答案: