Angular中如何给forkJoin并行请求设置8秒超时并提示用户

你可以借助RxJS自带的timeout操作符实现请求超时判定，该操作符会在指定时长未接收到上游返回值时主动抛出超时错误，配合subscribe的错误回调即可实现需求。

步骤1：导入依赖 #

RxJS 6及以上版本导入对应操作符：

import { timeout } from 'rxjs/operators';

步骤2：修改原有方法代码 #

在forkJoin的pipe链中添加8秒超时配置，同时补充错误回调处理逻辑，注意超时场景也要隐藏加载态，避免加载动画持续显示：

getRecognitionById() {
    this.loaderService.show(null, true);
    forkJoin(
      this.vendorWebApiService.getRecognitionById(this.executiveChangeId),
      this.vendorWebApiService.getLatestFeedback(this.executiveChangeId)
    ).pipe(
      take(1),
      timeout(8000) // 配置8秒超时阈值
    )
    .subscribe({
      next: (res) => {
        this.recognitionData = res[0];
        this.latestFeedback = res[1];
        this.generateResponseFeedbackGroup();
        this.loaderService.hide(true);
      },
      error: (response) => {
        this.loaderService.hide(true); // 异常场景关闭加载器
        // 可根据错误类型区分超时异常/接口业务异常，按需调整提示逻辑
        alert(response.exceptionMessage ?? '请求超时，请稍后重试');
      }
    });
}

补充说明 #

• 超时抛出的默认错误name属性为TimeoutError，如果需要区分错误类型做不同处理，可以判断err.name === 'TimeoutError'后自定义提示文案
• 如果需要对两个接口请求分别做超时控制，给每个接口返回的Observable单独添加timeout操作符即可

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