Angular：映射等待多个api调用时如何等待方法的最终结果？答案

【问题标题】：Angular: how to wait for final result of method while mapping is waiting for multiple api calls?Angular：映射等待多个api调用时如何等待方法的最终结果？
【发布时间】：2021-03-15 12:23:23
【问题描述】：

我的服务中有一个方法，我正在为我的自定义组件下载上下文。问题是，对于我的组件，我得到了一个包含 id 的附件字段。然后我必须使用这个 id 来下载附件并将它们添加到父对象。

这是我的方法：

  getComponentContext(componentConfigId: string, diaryInstanceId: string, endpoint: string, inputTypeId: string, UserID?: string) {
    return this.apiService.post(`componentinstances/${endpoint}`,
      {
        ComponentConfigID: componentConfigId,
        DairyInstanceID: diaryInstanceId,
        InputTypeID: inputTypeId,
        UserID
      })
      .pipe(
        switchMap(result => {
          if (result.Records && result.Records.length) {
            result.Records.forEach(record => {
              if (record.Fields) {
                const attachmentField = record.Fields.find(rec => rec.Type === 'Attachment');
                if (attachmentField) {
                  const folderDetails = this.documentsApiService.getFileDetailsByFolderID(attachmentField.Value).toPromise();
                  record.documentsFolder = folderDetails;
                }
              }
            });
          }
          return result;
        }),
        retry(2));
  }

所以我只想在所有this.documentsApiService.getFileDetailsByFolderID 调用都完成并且record.documentsFolder 具有它们的值时才return result;。有人可以帮我吗？

【问题讨论】：

标签： javascript angular asynchronous async-await

【解决方案1】：

你需要使用 RxJS forkJoin 函数来并行触发多个 HTTP 请求。为了强加你的条件，你可以使用带有 RxJS of 函数的三元运算符来为失败的条件发出原样的值。最后使用带有扩展语法的map 运算符来转换输出。

试试下面的

getComponentContext(
  componentConfigId: string, 
  diaryInstanceId: string, 
  endpoint: string, 
  inputTypeId: 
  string, 
  UserID?: string
) {
  const load = {
      ComponentConfigID: componentConfigId,
      DairyInstanceID: diaryInstanceId,
      InputTypeID: inputTypeId,
      UserID
  };

  return this.apiService.post(`componentinstances/${endpoint}`, load).pipe(
    switchMap(result => 
      (!!result.Records && result.Records.length)
        ? forkJoin(
          result.Records.map(record => {
            if (!!record.Fields) {
              const attachmentField = record.Fields.find(rec => rec.Type === 'Attachment');
              if (attachmentField) {
                return this.documentsApiService.getFileDetailsByFolderID(attachmentField.Value).pipe(
                  map((folderDetails: any) => 
                    ({ ...record, documentsFolder: folderDetails })
                  )
                );
              }
            }
            return of(record);
          })
        ).pipe(
            map(records => ({ ...result, Records: records }))
          )
        : of(result)
    )
  );
}

【讨论】：