Rxjs：使用take同步获取Observable值的写法是否正确？是否应返回Promise？

首先直接给结论：你写的同步返回数组的方式完全不可行，这是对Observable异步特性的典型误解。

为什么当前写法不对？ #

你的代码里，subscribe的回调函数是异步执行的——当你调用getAllTags()时，return to_ret这一行会先执行，此时to_ret还是你初始化的空数组，而x=>to_ret = x这个赋值逻辑要等到Observable发出值的时候才会运行，所以永远拿不到正确的NgRx状态值。

正确的处理方式 #

因为NgRx的状态流本身是异步的，我们应该遵循响应式编程的思路来处理，这里有两种常用方案：

方案1：直接返回Observable（推荐）

这是NgRx和Angular最推荐的方式，让调用方自己处理订阅，或者在模板中用async管道自动管理订阅：

getAllTags(): Observable<Array<TagModel>> {
  // 用first()比take(1)语义更清晰，表示只取第一个值
  return this.ngrxStateList.pipe(first());
}

比如在组件里可以这么用：

// 组件类中
tags$ = this.yourService.getAllTags();

然后在模板里：

<ul>
  <li *ngFor="let tag of tags$ | async">{{tag.name}}</li>
</ul>

async管道会自动帮你订阅和取消订阅，还能避免内存泄漏，非常省心。

方案2：转换成Promise返回（仅在特殊场景使用）

如果你的场景必须用Promise风格（比如某些老的同步逻辑、第三方库回调），可以把Observable转换成Promise。注意RxJS版本差异：

• RxJS 7及以上，推荐用firstValueFrom：

async getAllTags(): Promise<Array<TagModel>> {
  return firstValueFrom(this.ngrxStateList.pipe(first()));
}

调用的时候需要用await或者.then()：

// 调用示例
async someFunction() {
  const tags = await this.yourService.getAllTags();
  // 处理tags
}

• RxJS 6及以下可以用toPromise()：

getAllTags(): Promise<Array<TagModel>> {
  return this.ngrxStateList.pipe(first()).toPromise();
}

额外提醒 #

尽量不要试图把异步的Observable强行改成同步返回，这违背了响应式编程的设计初衷，还容易引发难以排查的异步bug。优先用方案1，配合async管道是最优雅的处理方式。

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