Angular中switchMap未触发'/upload/file'二次API调用问题求助

排查与解决步骤 #

• 首先确认sessionService.keepAlive()返回的 observable 特性：如果该流会多次emit值（比如是定时保活的长流），switchMap会在新值到来时直接取消前一次未完成的/upload/file请求，就会出现请求始终不触发的情况。这种场景把switchMap替换为concatMap或者exhaustMap即可。
• 修正Http请求头的构造方式：Angular HttpClient 推荐使用HttpHeaders类构造请求头，直接传普通对象可能会出现头信息解析异常，导致请求初始化失败，修改方式如下：

// 顶部引入HttpHeaders
import { HttpHeaders } from '@angular/common/http';

const request_config = {
  headers: new HttpHeaders({
    "Authorization": token
  })
};

• 单独测试upload方法排除其他逻辑影响：先注释掉zip的调用，单独订阅this.service.upload(fData)，排除submitForm请求异常对zip组合流的干扰。
• 增加全链路日志确认异常节点：

upload(formData): Observable <any> {
  return this.sessionService.keepAlive().pipe(
    // 监听keepAlive的错误
    tap({ error: err => console.log('keepAlive流异常', err) }),
    switchMap(data => {
      let token = data.jwtToken;
      console.log(token, 'TOKEN SESSION');
      const request_config = {
        headers: new HttpHeaders({
          "Authorization": token
        })
      };
      console.log("REQUEST CONFIG", request_config);
      return this.http.post < any > (
        '/upload/file',
        formData,
        request_config
      ).pipe(
        map((res) => {
          console.log(res, 'RESPONSE');
          return res.status;
        }),
        catchError((error: HttpErrorResponse) => {
          // 打印请求报错日志
          console.log('/upload/file请求异常', error);
          throw error;
        })
      )
    }),
    // 监听整个upload流的异常
    tap({ error: err => console.log('upload整体流异常', err) })
  )
}

• 检查Http拦截器逻辑：如果项目配置了全局Http拦截器，确认是否有规则拦截了/upload/file请求，直接吞掉了流没有向下传递，也会导致请求不触发。可以打开浏览器开发者工具的网络面板，确认是否有/upload/file的请求记录：
  • 如果网络面板没有该请求：说明请求在构建阶段就失败，优先排查头信息构造、拦截器逻辑
  • 如果网络面板有该请求但状态异常：根据响应状态码排查接口参数、后端鉴权逻辑

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