JavaScript вызов нескольких асинхронных c параллельных вызовов - PullRequest
0 голосов
/ 20 января 2020

У меня есть массив с именем 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();

Вместо этого я хочу что-то, где я передаю массив изображений. Изображения загружаются параллельно. Как только все закончено, я получаю массив ссылок. Потому что я знаю концепцию Promise.all()

Это не то, что я хочу.

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

Я не хочу присваивать так много переменных. Мне просто нужен массив со всеми ссылками, и что наиболее важно, если какое-либо изображение не удалось загрузить, оно должно игнорировать и не прерывать весь процесс.

1 Ответ

4 голосов
/ 20 января 2020

Из массива 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 или реализуйте функциональность одним из многих перечисленных методов здесь .

...