Angular 8 - 在循环之前等待 promise 完成循环

Question

我需要遍历一个列表并进行多次调用，这些调用依赖于先前的调用以在迭代循环之前完成。 每个 function 调用都会返回一个 promise。

我当前的代码只是遍历列表并尽可能快地进行调用：

this.records.forEach(item => {
  this.myService.doFirstTask().then(res => {
    if (res) {
      this.myService.doSecondTask().then(res => {
        if (res) {
          // do something.
        }
      });
    }
  });
});

问题是，在允许 the.forEach 到 go 到下一个项目之前，我需要先等待myService.doSecondTask()完成并返回它的 promise。

我知道解决方案是将async function 与await一起使用，但这对我来说很新。

在迭代 .forEach 循环之前，任何人都可以提供一些关于如何等待嵌套 promise 完成的帮助吗？

是使.doSecondTask() function 使用async-await的解决方案吗？

Answer 1

看到您在 Angular 中，您应该使用可观察对象。 如果您的服务返回可观察的而不是像 Angular 中那样的承诺，您可以使用 RxJs concatMap。

from(this.records).pipe(
  concatMap(record => this.myService.doFirstTask(record)),
  switchMap(resultOfDoFirstTask => this.myService.doSecondTask())
).subscribe(resultOfDoSecondTask => {
  // Fires once for each record
});

这是 RxJs 方式。 我们倾向于避免使用 Angular 中的承诺，因为它是建立在 RxJs 之上的。

这是演示的可运行片段。

 const { of, from } = rxjs; const { concatMap, switchMap, delay } = rxjs.operators; const records = [1,2,3,4,5,6]; const myService = { doFirstTask: val => of(`${val}: from first task`).pipe(delay(500)), doSecondTask: val => of(`${val}: from second task`).pipe(delay(500)), }; from(records).pipe( concatMap(record => myService.doFirstTask(record).pipe( switchMap(resultOfDoFirstTask => myService.doSecondTask(resultOfDoFirstTask)) )) ).subscribe(resultOfDoSecondTask => { console.log(resultOfDoSecondTask); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.0/rxjs.umd.min.js"></script>

如果您不想重构您的服务以返回可观察对象，您可以将它们包装在 from 中以从 promise.from from(this.myService.doSecondTask())中获取可观察对象