如何在 for 循环中进行 API 调用以等待一个完成，然后再使用 observables 在 Angular 中创建另一个？

Question

我有一个 for 循环，如果数组的长度为 6，则根据数组的长度进行一次 API 调用，所以会有 6 次 API 调用，问题是异步调用，所以其中一些给了我错误, 我怎样才能对循环内的每个 API 调用等到它完成后再进行另一个调用？

我真的很想用 observables 而不是 promises 来做

这是我打电话的地方

 respuestaEncuesta(respuesta:any,idEncuesta:number,idPregunta:number){
    return this.http.post(this.API_URL+'api/encuestas/'+idEncuesta+'/preguntas/'+idPregunta+'/respuesta',respuesta,this.httpOptions)
  }

这是我的 for 循环，我在函数中所做的唯一事情是发送数组然后执行循环，这是在我的 ts 上，在这里我调用在服务内部执行 API 调用的函数

for (let j=0;j < this.obj.data.length; j++){
      this.userService.respuestaEncuesta(this.obj.data[j],this.id,this.auxPreguntas[j])
      .subscribe(
        res => {
          let auxRes:any;
          auxRes = res;
          if(auxRes.estado == 'success'){
            console.log('successful call')
          }
        },
        err => {
          console.log(err)
        }
      )
    }

我尝试过这样的 forkjoin，但没有成功，有些请求没有发送

respuesta:any = [];
for (let j=0;j < this.obj.data.length; j++){
this.respuesta.push(this.userService.respuestaEncuesta(this.obj.data[j],this.id,this.auxPreguntas[j])) 
    }
forkJoin(this.respuesta)
    .subscribe(
      results => {
        console.log(results);
      }
    )

Answer 1

您可能正在寻找concatMap

示例

stackblitz：https://stackblitz.com/edit/angular-ivy-ms2yst?file=src/app/app.component.ts

let data = [1, 2, 3];
of(...data)
.pipe(
  // use a concatmap
  concatMap(value => {
    return of(value).pipe(delay(2000)) 
    // this represents your request
  })
)
.subscribe(item => {
  console.log(item);
  // requests should now be made one after another, do whatever
});