javascript - imagesURI 做了很多 promise 如何在这种情况下使用promise.all

Question

此函数将图像数组发布到 Firebase 存储并获取 URL 将其发布到 Firebase 数据库。

uploadImages(images, callBack) {
    this.uploadedImages = [];
    for (let index = 0; index < images.length; index++) {
      const imagesURI = storage()
        .ref("images/")
        .child(this.uid())
        .child(index + "");
      imagesURI.putString(images, "data_url").then(() => {
        imagesURI.getDownloadURL().then(url => {
          console.log(url);
          this.uploadedImages.push(url);
          console.log(this.uploadedImages);
        });
      });
    }
    callBack(this.uploadedImages);
  }

在这种情况下我该如何使用Promise.all？

Answer 1

putString 和 getDownloadURL 都返回一个 Promise，因此您可以将它们冒泡，并将它们添加到 Promise.all 的数组中.

uploadImages(images, callBack) {
    let promises = [];
    for (let index = 0; index < images.length; index++) {
      const imagesURI = storage()
        .ref("images/")
        .child(this.uid())
        .child(index + "");
      let promise = imagesURI.putString(images, "data_url").then(() => {
          return imagesURI.getDownloadURL();
        })
      promises.push(promise);
    }
    Promise.all(promises).then(function(urls)
      this.uploadedImages = urls;
      callBack(this.uploadedImages);
    });
}

请注意，我只关注使用 promise 在上传完成时进行捕获。代码中可能还有其他错误。

正如 Bergi 评论的那样，您还可以用返回 promise 来替换回调:

uploadImages(images, callBack) {
    let promises = [];
    for (let index = 0; index < images.length; index++) {
      const imagesURI = storage()
        .ref("images/")
        .child(this.uid())
        .child(index + "");
      let promise = imagesURI.putString(images, "data_url").then(() => {
          return imagesURI.getDownloadURL();
        })
      promises.push(promise);
    }
    return Promise.all(promises)
}

有了这个，你可以用以下方式调用它:

uploadImages(imageArray).then(function(downloadUrls) {
  console.log(downloadUrls);
})