Angular拦截器替换toPromise为last/firstValueFrom后应用异常排查

问题原因 #

替换失败的核心原因有两点：

• lastValueFrom/firstValueFrom 是返回Promise的异步方法，必须搭配await使用才能拿到Observable发出的实际值，未加await时拿到的是Promise对象，无法直接读取status属性
• 第二次尝试直接返回了pipe加工后的Observable实例，没有在流操作内部处理响应值，同时额外加的map((data) => ({ data }))会把原始响应包装成多余的嵌套结构，进一步导致属性读取失败

方案1：最小改动对齐原有逻辑（Promise写法） #

和原有逻辑行为完全一致，只需要把废弃的toPromise()替换为官方推荐的方法即可，首先导入依赖：

import { lastValueFrom, throwError } from 'rxjs';

核心逻辑代码：

async intercept(req: HttpRequest<any>, next: HttpHandler) {
  try {
    // lastValueFrom 会等待Observable完成后返回最后一个发出的值，和原toPromise()行为完全一致
    // HTTP请求场景下也可以替换为firstValueFrom，二者效果相同
    const data = await lastValueFrom(next.handle(req));
    return data.status < 300
      ? this.mountPagination(data)
      : this.getResponseStatus(data, context);
  } catch (error) {
    // RxJS 7+ 版本throwError推荐传入工厂函数，旧版本可直接传错误对象
    return throwError(() => this.createHttpException(error));
  }
}

方案2：纯RxJS流写法（推荐） #

不需要转Promise，完全遵循响应式编程范式，更符合Angular HTTP拦截器的接口设计要求，性能更好：

import { catchError, map, throwError } from 'rxjs';

intercept(req: HttpRequest<any>, next: HttpHandler) {
  return next.handle(req).pipe(
    map(data => {
      return data.status < 300
        ? this.mountPagination(data)
        : this.getResponseStatus(data, context);
    }),
    catchError(error => throwError(() => this.createHttpException(error)))
  );
}

注意事项 #

• 移除第二次尝试里多余的map((data) => ({ data }))操作，该操作会把原始HTTP响应包装为{ data: 原始响应 }的嵌套结构，会导致后续读取status属性时返回undefined
• 如果项目启用了严格的Observable完成校验，HTTP场景优先用firstValueFrom，可以避免流异常未完成时的潜在内存泄漏问题
• RxJS 7.x版本中toPromise()仅被标记为废弃并未移除，RxJS 8.x版本才会正式删除该方法，迁移时只要保证给lastValueFrom/firstValueFrom添加await关键字即可正常运行

内容的提问来源于stack exchange，提问作者Augusto Barcelos Oliveira