javascript - Javascript异步如何等待不同数量的uploadTasks全部完成？

Question

我有saveBlogPost()需要执行以下操作的功能：

• 调用该uploadImages()函数将 blogPost 的图像更新到 Firebase 存储。图像数量不固定。
• 等待所有图像的上传成功或错误完成。如果成功，每个图像的 URL 将在 blogPost 对象中可用。
• 根据上传的结果行动
  • 如果成功：将帖子保存到 Firestore
  • 如果失败：向用户显示错误消息

我的问题是如何等待不同数量的上传？

到目前为止，这是我的代码：

---

savePost() 函数：

function savePost() {
  uploadImages();
}

上传图片（）函数：

注意： images是要上传的图像文件的数组。

function uploadImages() {
  images.forEach((image) => {
    const uploadTask = storageRef.put(file,metadata);
    uploadTask.on('state_changed',
      function progress() {
        //UPLOAD PROGRESS BAR
      },
      function error(err) {
        //SET ERROR
      },
      function complete() {
        //UPDATE IMAGE URL IN BLOGPOST OBJECT
        //SET COMPLETE
      }
  });
}

问题：

我的意图是创造savePost()功能async和await为uploadImages()功能。但是只有在所有图像都已解决/拒绝后，我才能解决/拒绝该功能？uploadImages()

就像是：

async function savePost() {
    const result = await uploadImages();
    // ACT BASED ON RESULT
  }

但我不知道如何处理该uploadImages()功能，以便仅在完成所有图像后解决/拒绝。

我怎样才能做到这一点？

标签： javascriptfirebaseasync-awaitfirebase-storage

Answer 1

function uploadImages() {
    const promises = images.map(async image =>
        new Promise((resolve, reject) => {
            const uploadTask = storageRef.put(file, metadata);
            uploadTask.on('state_changed',
                function progress() {
                    //UPLOAD PROGRESS BAR
                },
                function error(err) {
                    //SET ERROR
                    reject(err);
                },
                function complete() {
                    //UPDATE IMAGE URL IN BLOGPOST OBJECT
                    //SET COMPLETE
                    resolve();
                }
            );
        })
    );

    return Promise.all(promises);
}