Как вернуть функцию асинхронной карты в правильном порядке?

У меня есть эта функция прямо здесь:

const uploadedFiles: string[] = [];
await Promise.all(
   selectedImageUrls.map(async (selectedUrl) => {
       const fileName = selectedUrl.startsWith("data:image/png")
          ? `${id}-${Date.now()}.png`
          : `${id}-${getFileNameFromUrl(selectedUrl)}`;
       const fileData = await fetch(selectedUrl).then((x) => x.arrayBuffer());
       const newUrl = await uploadInvoiceFile(userId, fileName, fileData);
       uploadedFiles.push(newUrl);
   })
);

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
67
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Promise.all будет возвращать запросы в том же порядке, в котором вы создали карту. Но порядок вещей может быть не в порядке.

Так что все, что вам нужно сделать, это получить результаты от Promise.all. например..

const uploadedFiles = await Promise.all(
   selectedImageUrls.map(async (selectedUrl) => {
       const fileName = selectedUrl.startsWith("data:image/png")
          ? `${id}-${Date.now()}.png`
          : `${id}-${getFileNameFromUrl(selectedUrl)}`;
       const fileData = await fetch(selectedUrl).then((x) => x.arrayBuffer());
       const newUrl = await uploadInvoiceFile(userId, fileName, fileData);
       return newUrl;
   })
);

Пс. видно, что вы используете Typescript, приятно то, что uploadedFiles также будет неявно иметь тип string[], если, конечно, newUrl является строкой..

Также небольшой совет: если последняя вещь, которую вы делаете внутри функции async, — это возврат промиса, вы можете пропустить временную переменную и await.

например.

const newUrl = await uploadInvoiceFile(userId, fileName, fileData);
return newUrl;

Можно упростить до ->

return uploadInvoiceFile(userId, fileName, fileData);

на каждой карте я помещаю результат асинхронных функций в массив с именем uploadedFiles

Просто не делай этого. Promise.all уже создаст массив со всеми результатами промисов, используйте это:

const uploadedFiles: string[] = await Promise.all(
    selectedImageUrls.map(async selectedUrl => {
        const fileName = selectedUrl.startsWith("data:image/png")
          ? `${id}-${Date.now()}.png`
          : `${id}-${getFileNameFromUrl(selectedUrl)}`;
        const x = await fetch(selectedUrl)
        const fileData = await x.arrayBuffer();
        return uploadInvoiceFile(userId, fileName, fileData);
//      ^^^^^^
    })
);

Другие вопросы по теме