Angular 13中如何处理RXJS的.toPromise()废弃问题

问题背景 #

你的代码用于从Firebase获取JWT Token并设置到GraphQL请求头中，但因toPromise()已被废弃，需要替换为RxJS的firstValueFrom或lastValueFrom。

你的尝试问题 #

你当前的改写存在两个关键问题：

1. 未对lastValueFrom返回的Promise使用await，导致token是Promise对象而非实际的token字符串，最终会生成无效的Bearer [object Promise]请求头
2. auth.idToken是一个持续发出值的Observable（用户登录状态变化时会更新token），lastValueFrom会等待Observable完成后返回最后一个值，但这个Observable永远不会主动完成，会导致代码卡住无法获取token

正确改写方案 #

结合原代码take(1)的逻辑（获取第一个发出的token后结束），应该使用firstValueFrom并配合await，同时保留take(1)确保自动取消订阅：

首先导入所需的RxJS工具：

import { firstValueFrom } from 'rxjs';
import { take } from 'rxjs/operators';

改写后的核心代码：

const authCtx = (auth: AngularFireAuth) =>
  setContext(async () => {
    const token = await firstValueFrom(auth.idToken.pipe(take(1)));
    return {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    };
  });

改写说明 #

• firstValueFrom：专门用于获取Observable发出的第一个值，与原代码take(1).toPromise()的行为完全一致
• await：必须添加，因为firstValueFrom返回Promise，需要等待其resolve才能拿到实际的token值
• take(1)：确保获取第一个token后自动取消订阅，避免内存泄漏，同时明确终止Observable流

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