尝试从 Cloud Storage 获取 downloadURL 时出现多项承诺问题

Question

所以我想做的是将来自多个承诺（正在上传的文件）的每个下载 URL 存储在一个数组中，同时循环遍历它们。发生的事情是，无论我得到多少项目，我都会得到每个项目的第一个输出，它只是不断给我第一个承诺的第一个 downloadURL。

如果我能以某种方式标记每个承诺，这样它们就不会互相重复并为每个文件提供相同的值，或者 myb 停止每个承诺并等到第一个完成后开始第二个。第一个解决方案对我来说听起来更好，但我仍然不知道我该怎么做。

   pushUpload(upload: Upload) {

    let storageRef = firebase.storage().ref();
    this.uploadTask = storageRef.child(`${this.basePath}/${upload.file.name}`).put(upload.file);

    this.uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot) =>  {
        // upload in progress
        upload.progress = Math.ceil((snapshot.bytesTransferred / snapshot.totalBytes) * 100)
      },
      (error) => {
        // upload failed
        console.log(error)
      },
      () => {
        // upload success
        this.uploadTask.snapshot.ref.getDownloadURL().then((url)=>{
          this.uploadInfo.push(url)
        })
      })
  };

  uploadMultiple() {
    let files = this.selectedFiles
    let filesIndex = _.range(files.length)
    _.each(filesIndex, (idx)=>{
      this.currentUpload = new Upload(files[idx]);
      this.service.pushUpload(this.currentUpload);
    })
  }

Answer 1

您可以使用 RxJS 将您的 Promises 变成 Observables，然后使用 forkJoin 等待每个 Promise 完成。

import { from, forkJoin } from 'rxjs';

let promises = thePromiseArray();
forkJoin(...promises.map(promise => from(promise))).subscribe(
  results => {
    console.log("This is an array of the results of each Promise:", results);
  }
)

您还可以使用 pipe 为所有下载或每个下载单独添加额外的运算符。例如，您可以使用 timeout 来确保您等待的时间不会超过某个时间：

forkJoin(...promises.map(promise => from(promise).pipe(
  timeout(25000) // This is applied to each download individually
))).pipe(
  // Any operators added here would be applied to the forkJoin, so all downloads as a whole
).subscribe(
  results => {
    console.log("This is an array of the results of each Promise:", results);
  }
)

尝试从 Cloud Storage 获取 downloadURL 时出现多项承诺问题

Problem with multiple promises when trying to get downloadURL's from Cloud Storage

angular

typescript

promise

firebase-storage

angular-promise