从 Observable 中获取当前值且只订阅一次

当我们在使用 RxJS 进行前端开发时，可能会遇到这样一个情况：我们只需要获取 Observable 的当前值，而不想一直进行订阅。本文将介绍如何实现这个目标。

使用 take(1)

使用 take() 操作符可指定要发射的值数量，它可以帮助我们仅订阅一次并获取当前值：

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

const source$ = from([1, 2, 3]);
source$.pipe(take(1)).subscribe(value => {
  console.log(value); // 输出 1
});

上面的代码中，我们通过 from() 创建了一个 Observable，并将其管道传递给 take() 操作符以指定要发射的值数量为 1。最后我们调用 subscribe() 方法来订阅 Observable。当 Observable 发出第一个值时，take(1) 立即完成并释放订阅。这样我们就能够获取 Observable 的当前值并且只订阅一次。

使用 AsyncSubject

另外一种方法是使用 AsyncSubject 类型，它是 RxJS 中的一个 Subject 类型，它只会在 Observable 完成时发射最后一个值。我们可以通过订阅一个 AsyncSubject 来获取 Observable 的最新值：

import { AsyncSubject, from } from 'rxjs';

const source$ = from([1, 2, 3]);
const subject$ = new AsyncSubject();
source$.subscribe(subject$);
subject$.subscribe(value => {
  console.log(value); // 输出 3
});

上面的代码中，我们创建了一个 AsyncSubject 类型的 subject，并将其订阅到 Observable 上。当 Observable 完成时，AsyncSubject 发射最后一个值，我们就能够通过订阅它来获取 Observable 的当前值。

需要注意的是，如果 Observable 没有完成，AsyncSubject 将不会发射值。因此，我们需要确保 Observable 一定会完成才能使用这种方法。

使用 Promise

除了 RxJS 自身提供的工具，我们还可以使用 Promise 来获取 Observable 的当前值：

import { from } from 'rxjs';

const source$ = from([1, 2, 3]);
const promise = source$.toPromise();
promise.then(value => {
  console.log(value); // 输出 1
});

上面的代码中，我们调用 toPromise() 方法将 Observable 转换为 Promise，并在 Promise 中获取 Observable 的第一个值。需要注意的是，如果 Observable 没有发出任何值，Promise 将永远处于挂起状态。

结论

本文介绍了三种获取 Observable 当前值的方法：使用 take(1) 操作符、使用 AsyncSubject 和使用 Promise。每种方法都有其适用场景，开发者应根据具体的情况选择合适的方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60542bb58d846479e750ab35