Question

我有一个打字稿数组this.products 我需要遍历数组的元素，并为每个元素将参数发送到Angular服务，该服务进行API调用并以Observable的形式获取客户端的答案。但是，由于Observable的异步特性，我的循环在从服务器发回所有答案之前完成。这是我的代码：

this.products.forEeach((ele, idx) => {
     this.myService.getSomeDetails(ele.prop1, ele.prop2).subscribe(result => {
         // do something with result 
     });   
});

我需要循环仅在每个可观察的订阅完成之后才进行。我该如何实施？谢谢。

Answer 1

您正在寻找的是forkJoin：

https://rxjs-dev.firebaseapp.com/api/index/function/forkJoin

将项目数组映射到api调用可观察对象数组，并将其传递给forkJoin。这将发出所有已解析的api调用的数组。

简单又肮脏的示例

forkJoin(this.products.map(i => this.myService.getSomeDetails(ele.prop1, ele.prop2))).subscribe(arrayOfApiCallResults => {
    // get results from arrayOfApiCallResults
})

Answer 2

您不需要async / await关键字即可按顺序进行呼叫。

import { concat } from 'rxjs';

concat(this.products.map(ele => this.myService.getSomeDetails(ele.prop1, ele.prop2)))
  .subscribe(
    response => console.log(response),
    error => console.log(error),
    () => console.log('all calls done')
  )

Answer 3

尝试一下：

let results = await Promise.all(this.products.map(ele => 
    this.myService.getSomeDetails(ele.prop1, ele.prop2).toPromise()
));

// put code to process results here

请求并行发送。请记住在使用上述代码的函数定义中添加async关键字。更多信息here。

Answer 4

这是编码的好方法。

from(this.products).pipe(mergeMap(
     ele => this.myService.getSomeDetails(ele.prop1, ele.prop2)
)).subscribe(result => {
     () => console.log('.'),
      e => console.error(e),
     () => console.log('Complete')
});

异步循环打字稿数组

4 个答案: