如何在angular|Typescript中把Observable转换为Promise？

有时候，我们想把obsable转换为promise对象，并在Angular中调用回调then()。Observable返回多个值，而promise返回单个值。

与promise相比，Observable的功能更丰富，推荐使用。然而，有些情况下需要转换为promise。

• 你必须将数据传递给只接受promise的第三方API。

如何在Angular中将Observable转换为Promise

我们有多种方法可以做到

Observable 有toPromise() 方法，该方法订阅 observable 并返回 promise。

注意：请确保Observable应该完成操作，否则，它将永远停止，并导致内存错误。

下面是一个语法

Observable.toPromise()
      .then();

下面是一个完整的例子，在Angular中转换为promise。

import { Component } from '@angular/core';
import { delay, Observable, of } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  private myarray: string[] = ["test", "test2", "test3"]
  strings$: Observable = of(this.myarray);
  array1$: Observable = of(this.myarray).pipe(delay(5000));

  constructor() {
    console.log("start")

    const example = this.array1$.toPromise()
      .then(item => {
        console.log('Returned Promise value:', item);
      });

    console.log("end")
  }

}

输出

start
end
Returned Promise value: (3)['test', 'test2', 'test3']

toPromise() 在Rxjs7版本中已被弃用。

Rxjs提供了lastValueFrom 和firstValueFrom 方法来转换promise。

用lastValueFrom()代替toPromise()，返回数据流。

  public async getPromiseUseLast() {
    const promiseVar = await lastValueFrom(this.array1$);
    console.log('Returned lastValueFrom usage value:', promiseVar);

    return promiseVar;
  }

firstValueFrom() 不考虑数据流，只获取第一个数据，并取消对数据流的订阅。

public async getPromiseUseFirst() {
  const promiseVar = await firstValueFrom(this.array1$);
  console.log('Returned firstValueFrom usage value:', promiseVar);

  return promiseVar;
}

结论

总而言之:

Observable比promise更先进，功能更丰富，有些时候需要在Angular中转换promise。