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

Question

我有 saveBlogPost() 函数需要执行以下操作:

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

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

这是迄今为止我的代码:

<小时/>

savePost() 函数:

function savePost() {
  uploadImages();
}

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() 函数，以便仅在所有图像完成后解决/拒绝。

我该怎么做？

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);
}