JavaScript并行调用多个异步调用

Question

我有一个名为imagesToUpload的数组。上传功能返回一个承诺。现在，我必须等待，图像接连上传。这是我的示例代码。

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

而不是我想要在图像数组中传递的东西。图像并行上传。完成所有操作后，我得到了links数组。因为我知道Promise.all()

的概念

这不是我想要的。

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

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

Answer 1

从imagesToUpload数组中，使用.map将其转换为一个Promises数组，然后在该数组上调用Promise.allSettled，通过检查每个结果对象的status属性，仅过滤已实现的承诺，然后最后.map为其解析值：

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列出的许多方法之一实现功能。