Angular - 嵌套 API 调用

Question

我从这样的 API 获取数据：

this.myService.getFirstData(slug).pipe(takeUntil(this.unsubscribe))
      .subscribe(firstData => {
        this.data = firstData;
        for (const column of this.data.columns) {
          if(column.Type == 'List'){
            // Another API call here for this type of data. Note: I need to link them for populating a form (like => firstData[0] : dataFromSecondApiCall)
           }else if(column.Type == 'Enum')
            {
             // Another API call here for this type of data
            }
            And so on...
         }
       });

我已经执行了这些 API 调用并获取了我的数据，但我想要一种更有效的方式（也许使用 forkJoin ？）来执行此操作，因为我需要所有两个 API 数据来填充表单。

Answer 1

如果我理解正确的问题，这就是我实现此要求的方式。 评论试图解释代码。

this.myService.getFirstData(slug).pipe(
  // after getFirstData returns you can concatenate another series of http 
  // calls using the concatMap operator
  concatMap(firstData => {
     this.data = firstData;
     // we create an array to store the Observables that represent the
     // next calls we want to make
     let nextCalls Observable<any> = []
     for (const column of this.data.columns) {
       if(column.Type == 'List'){
         // depending on the type of column we push into the array a different
         // type of http request in the form of an Observable
         nextCalls.push(buildNextCallForList())
       } else if (column.Type == 'Enum') {
         nextCalls.push(buildNextCallForEnum())
       }
     }
     // eventually we exit concatMap returning the Observable returned by forkJoin
     // forkJoin will execute all the next http calls concurrently
     // and return an array with all the responses received
     return forkJoin(nextCalls)
  }),
  tap(dataFromSecondCalls => {
    // here you need to find if there is a way to link the results obtained
    // by the next calls with the data retrieved with the first call
    // and with what you want to achieve as final result
  })
)
// you can now subscribe
subscribe()

我自己没有试过这段代码，所以可能会有语法错误，但我希望代码的精神清晰。

考虑到您可能不需要takeUntil运算符，因为这似乎是一个 http 调用，并且 http 调用会生成一个仅通知 1 个值（或错误）并在之后立即完成的流。 因此无需使用takeUntil取消订阅。

看这篇文章，你可能会找到一些关于如何在 http 场景中使用 Observables 的灵感。