在 Angular 中从 Azure 下载元素期间的 ZoneAwarePromise 数组

如何解决在 Angular 中从 Azure 下载元素期间的 ZoneAwarePromise 数组

我正在通过端点从 Azure Blob 存储下载文件。现在我正在等待并在下面的代码中一一下载。

for (let idx = 0; idx < blobArray.length ; idx++)
{
  downloadedFiles.push(await this.azureBlowService.downloadFile(containerName,blobArray[idx])) 
}
return downloadedFile

服务中的下载方法

async downloadFile(containerName,fileName){
  let parameters = new HttpParams()
    .set("containerName",containerName)
    .set("fileName",fileName);

  let url = environment.baseUrl + "/api/v1/azure_blob/download_file";
  this.asyncResult = await this.http.get(url,{params: parameters,responseType: 'blob'}).toPromise()
  this.asyncResult.name = fileName;
  return this.asyncResult
}

当我在 this.azureBlowService.donwloadFile... 之前删除 await 时，我会得到像这样的 ZoneAwarePromises 数组 [ZoneAwarePromise,ZoneAwarePromise,ZoneAwarePromise] 我的假设是我会删除这个 await 为所有打击元素做承诺，以允许它们在并行过程中下载到让它更快并等待完成所有承诺而不是一一完成。现在下载时间真的很长，尤其是当我有 100 多个元素时。是否有可能？有人会知道如何做到这一点吗？提前致谢

解决方法

我认为将 promise 转换为 observable 没有任何优势。如果它是可观察的，我实际上更容易并行触发所有请求。

1. 使用 map 运算符将 name 属性附加到响应
2. 使用forkJoin函数并行合并和触发请求

试试下面的方法

downloadFile(containerName,fileName): Observable<any> {
  let parameters = new HttpParams()
    .set("containerName",containerName)
    .set("fileName",fileName);

  let url = environment.baseUrl + "/api/v1/azure_blob/download_file";
  return this.http.get(url,{params: parameters,responseType: 'blob'}).pipe(
    map((res: any) => ({ ...res,name: fileName }))   // <-- append `fileName` to `name` property
  );
}

forkJoin(
  blobArray.map(blob => this.downloadFile(containerName,blob))
).subscribe({
  next: response => {
    // output: array of response from invidual requests
    // statements that depend on `response`
  },error: error => {
    // handle error
  }
});