angular - 如何使用 Angular 设置 HttpHandler 的超时？

Question

我正在尝试使用 Angular5 为 HTTP 请求设置最大超时，这是我根据发现的结果:

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(private tokenService:TokenService) {}
  /**
   * This method will add the Authorization header on each API request
   * @param request 
   * @param next 
   */
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (request.url.includes('/api/')) {
      request = request.clone({ setHeaders: { Authorization: 'Bearer ' + this.tokenService.getToken() } });
      return next.handle(request).timeout(1, Observable.throw("Request timed out"));
    }
    return next.handle(request);
  }
}

除了它说 timeout does not exist on type Observable<HttpEvent<any>>

如何设置请求的超时时间？

Answer 1

注意:我还没有找到延长超时的方法，但这将允许您将超时编辑为比默认的 2 分钟更短。 如果您向后端发布的内容需要超过 2 分钟的时间来处理，您应该提醒客户您拥有数据并正在尝试处理它，而不是尝试延长超时时间。

以下是缩短超时的方法:

在您的应用模块中，您应该创建具有自定义超时(以毫秒为单位)的拦截器。

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { TimeoutError } from 'rxjs/util/TimeoutError';
import 'rxjs/add/operator/timeout';
import { InjectionToken, Injectable, Inject } from '@angular/core';
import { HttpHandler, HttpRequest, HttpInterceptor, HttpEvent } from '@angular/common/http';

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

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

将此添加到您的提供商列表:

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

当您发出要添加使用拦截器的自定义 header 的请求时，它看起来像这样:

const options = {
    headers: new HttpHeaders({ timeout: `${3600000}` }),
    params: params,
    reportProgress: true,
    Timeout: 5000
};

现在，当您发出达到 5000 毫秒超时的请求时，它应该停止。