时间戳

首页 > 解决方案 > 让异步方法上的 await 调用等到完成

async-await - 让异步方法上的 await 调用等到完成

问题描述

我有一个 observable，它返回 500 项永无止境的随机数流：

public async getSomeMidiNotes(): Promise<Array<number>> {
  const notes: Array<number> = new Array<number>();
  await this.getRandomMidiNotes()
  .pipe(
    take(500)
  )
  .subscribe(note => {
    notes.push(note);
  });
  return notes;
}

public getRandomMidiNotes(): Observable<number> {
  return interval(MIDI_NOTE_DURATION)
    .pipe(
      map(data => Math.floor(Math.random() * MIDI_NOTE_MAX) + MIDI_NOTE_MIN)
    );
}

我用它来返回一个数组：

const gotes: Array<number> = await this.generatorService.getSomeMidiNotes();
console.log(gotes);

但是浏览器控制台中显示的数组总是长度不等，有时是 2 项，有时是 50 项，等等......

我希望阵列在归还之前配备 500 件物品。

标签： async-awaitrxjs

解决方案

工作代码

public async getSomeMidiNotes(): Promise<Array<number>> {
  const notes: Array<number> = new Array<number>();

  return getRandomMidiNotes().pipe(
    take(500),
    map(note => {
      notes.push(note);
      return notes;
    })
  ).toPromise();
}

用法：

const notes: Array<number> = await this.generatorService.getSomeMidiNotes();
console.log(notes);

stackblitz 实现：https ://stackblitz.com/edit/rxjs-fcmzrp

解释

该map函数将项目推送到笔记数组并返回它。
允许你将toPromise你的 observable 转换为一个 Promise。在这种情况下，它会返回承诺，当您调用时，getSomeMidiNotes您将能够使用await.

推荐阅读