Angular 4：使用 HTTP 拦截器 + RxJS 超时运算符错误答案

【问题标题】：Angular 4: Using HTTP interceptor + RxJS timeout operator errorAngular 4：使用 HTTP 拦截器 + RxJS 超时运算符错误
【发布时间】：2018-03-31 14:34:01
【问题描述】：

我正在尝试为我使用 HttpClient 执行的每个 HTTP 请求设置 10 秒的默认超时。我有一个拦截器来向标头添加一些值，我已经读过要设置超时，您必须使用“超时”RxJS 运算符，如下所示：

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

import { Observable } from 'rxjs/Observable';
import { timeout } from 'rxjs/operators/timeout';

@Injectable()
export class APIInterceptor implements HttpInterceptor {
  constructor() {

  }

  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // NOTE: The following 'authToken' and 'user_id' values are obtained through a global service
    const authReq = req.clone({
      headers: new HttpHeaders ({
        'Content-Type':  'application/json',
        'X_TOKEN_AUTH': authToken,
        'X_IDUSER': user_id
      }) 
    });

    const API_TIMEOUT = 10000;

    //console.log('HEADER: ', authReq)

    return next.handle(authReq).timeout(API_TIMEOUT);   // Set a timeout for the requests
  }
}

在添加超时功能之前，一切正常，并且标头被注入了身份验证令牌和用户 ID。但是，现在我收到以下错误：

next.handle(...).timeout 不是函数

我做错了吗？谢谢！

【问题讨论】：

标签： angular rxjs angular-http-interceptors

【解决方案1】：

如果你想使用“补丁”风格的操作符，你需要从rxjs/add/operator/*导入：

import 'rxjs/add/operator/timeout';

使用pipe()时使用'rxjs/operators/timeout'方法。

【讨论】：

我正在使用它，但仍然出现错误。错误 TS2339：属性 'timeoutWith' 在类型 'Observable>' 上不存在。