如何在Angular5中设置HttpHandler的HTTP请求超时时间？

我来帮你完善这个拦截器代码，实现给/api/开头的请求统一设置最大超时时间的功能，结合你的需求，完整的实现如下：

第一步：导入必要的依赖 #

首先确保你导入了RxJS的timeout和catchError操作符，以及Angular的HTTP拦截器相关模块：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/operator/catchError';
import { TokenService } from './path-to-your-token-service'; // 替换成你的TokenService实际路径

第二步：完善拦截器逻辑 #

补全你的TokenInterceptor类，在处理请求时添加超时控制，同时保留你原本需要的Authorization头注入逻辑：

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  // 自定义超时时间，这里设置为10秒（单位：毫秒），可根据业务调整
  private readonly MAX_REQUEST_TIMEOUT = 10000;

  constructor(private tokenService: TokenService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 仅针对/api/开头的请求做处理
    if (request.url.includes('/api/')) {
      // 1. 注入Authorization请求头
      const authToken = this.tokenService.getToken(); // 假设你的TokenService有获取token的方法
      const authRequest = request.clone({
        setHeaders: {
          Authorization: `Bearer ${authToken}`
        }
      });

      // 2. 添加超时控制，并捕获超时错误
      return next.handle(authRequest)
        .timeout(this.MAX_REQUEST_TIMEOUT)
        .catchError(error => {
          // 识别超时错误并做自定义处理
          if (error.name === 'TimeoutError') {
            console.error('请求超时啦，请稍后再试哦');
            // 这里可以根据业务需求，抛出自定义错误或者返回默认值
            return Observable.throw(new Error('请求超时，请检查网络或稍后重试'));
          }
          // 其他类型的错误直接抛出，交给上层处理
          return Observable.throw(error);
        });
    }

    // 非/api/路径的请求直接放行
    return next.handle(request);
  }
}

第三步：注册拦截器 #

最后别忘了在你的AppModule里注册这个拦截器，这样它才能生效：

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from './path-to-your-interceptor'; // 替换成拦截器的实际路径

@NgModule({
  declarations: [/* 你的组件声明 */],
  imports: [/* 你的模块导入 */],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true // 允许多个拦截器并存
    }
  ],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

关键说明 #

• 因为你用的是Angular 5，对应的RxJS版本是5.x，所以要使用rxjs/add/operator/xxx的方式导入操作符，不能用RxJS 6+的pipe()语法哦。
• 超时时间的单位是毫秒，你可以根据实际业务场景调整MAX_REQUEST_TIMEOUT的值。
• 在catchError里可以根据需求自定义超时后的处理逻辑，比如提示用户、跳转页面或者返回默认数据。

内容的提问来源于stack exchange，提问作者Shamoon