如何让async map函数返回结果与原数组顺序完全一致？

问题出在你手动通过push向数组添加结果，由于每个异步任务的完成时间不同，先完成的任务会先把结果插入数组，导致最终顺序和原数组selectedImageUrls不一致。

而Promise.all本身会严格按照传入的Promise数组的顺序，返回对应顺序的结果数组，利用这个特性就能轻松解决顺序问题，修改后的代码如下：

// 直接接收Promise.all的返回结果，无需手动push
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());
    // 让异步函数返回结果，Promise.all会自动按顺序收集
    return await uploadInvoiceFile(userId, fileName, fileData);
  })
);

修改说明 #

• 移除了手动维护uploadedFiles数组并push的逻辑
• 让map中的异步箭头函数返回最终的newUrl（即uploadInvoiceFile的返回值）
• Promise.all会等待所有异步任务完成，然后按selectedImageUrls的原顺序返回结果数组，直接赋值给uploadedFiles即可保证顺序完全一致

内容的提问来源于stack exchange，提问作者Owenn