JavaScript 并行调用多个异步调用

Question

我有一个名为imagesToUpload的数组。上传函数返回一个 promise 。现在我必须等待，图片陆续上传。这是我的示例代码。

function uploadTos3Bucket(filename){
    return new Promise((resolve,reject)=>{
        resolve(filename+'.png')
    })
}

const imagesToUpload = ['Homer','Bart','Lisa','Millhouse'];

async function controller() {
    const links = []

    for (const imageFile of imagesToUpload) {
        const link = await uploadTos3Bucket(imageFile);
        links.push(link)
    }
    console.log('links',links)
    
}
controller();

而不是这个，我想要一些传递图像数组的东西。图像并行上传。全部完成后，我得到了链接数组。当然我知道 Promise.all()

的概念

这不是我想要的。

const [image1,image2] = await Promise.all([uploadTos3Bucket('Homer'),uploadTos3Bucket('Bart')])

我不想分配这么多变量。我只想要一个包含所有链接的数组，最重要的是，如果某些图像上传失败，它应该忽略而不是破坏整个过程。

Answer 1

从 imagesToUpload 数组中，使用 .map 将其转换为 Promises 数组，然后对该数组调用 Promise.allSettled，通过检查每个结果对象的 status 属性，最后检查 .map 到它们的解析值，仅过滤已履行的 promise :

function uploadTos3Bucket(filename){
    return new Promise((resolve,reject)=>{
        resolve(filename+'.png')
    })
}

const imagesToUpload = ['Homer','Bart','Lisa','Millhouse'];

async function controller() {
  const results = await Promise.allSettled(imagesToUpload.map(uploadTos3Bucket));
  const links = results
    .filter(({ status }) => status === 'fulfilled')
    .map(({ value }) => value);
  console.log('links',links)  
}
controller();

对于尚无法识别 Promise.allSettled 的浏览器，请添加 polyfill ，或使用 here 列出的众多方法之一实现该功能。