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

debugcn 发表于 Dev

开发者

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

我怎样才能做到这一点？

亚历山大·亚岑科

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。