如何在循环中进行 HTTP 调用并等待一个完成后再进行另一个？

Question

我有一组项目，我想在每个元素上进行 HTTP 调用，等待它完成，然后再进行一次调用，一次只能调用一个。

我试过了：

index(item) {
   return this.service.index(item).pipe(
      map(response => {
         // handle success case
      }),
      catchError(error => {
         // handle error case
      })
   )
}

async processArray(array) {
  const promises = array.map(item => this.index(item));
  await Promise.all(promises);
}

proccessArray(array);

还有 NGRX 效果：

@Effect()
effect$ = this.actions$.pipe(
   ofType<action>(actionTypes.action),
   mergeMapTo(this.store.select(getMyArray)),
   flatMap((request: any[]) => {
       return zip(...request.map(item => {  
         return this.service.index(item).pipe(
               map(response => {
                  // handle success case
               }),
               catchError(error => {
                  // handle error case
               })
            )
         }))
      }),
   );

还尝试在 for 和 forEach 循环中执行此操作，但它们会立即触发所有请求。我怎样才能做到这一点？

Answer 1

如果您正在使用 Promise 并希望在进行另一个调用之前等待每个 Promise 解决，那么 (1) 您不应该使用 Promise.all 因为这将等到所有请求都解决并且 (2) 您需要使用一个普通的旧 for 循环，使您能够等待循环内的异步操作。

async processArray(array) {
  for(var i = 0; i < array.length; i++){
    await yourServiceCall();
  }
}

附带说明：由于您使用的是 async-await，因此请不要忘记 convert 您的可观察到的 Promise。

如果您想摆脱 Promise（和 async-await）并改用纯 RxJS，请查看 concatMap：

将每个源值投影到一个 Observable 中，该 Observable 合并到输出 Observable 中，以序列化的方式等待每个源值完成，然后再合并下一个。

例如：

import { from } from 'rxjs/observable/from';

ngOnInit() {
  from(myArray)
    .pipe(concatMap(el => yourServiceCall(el)))
    .subscribe(/* your logic */);
}