如何使用Promise.all处理包含Promise属性的对象数组？

这个问题我之前也碰到过！其实核心思路就是先把每个带Promise属性的对象，转换成一个能解析出「属性已变为实际值」的对象的Promise，再用Promise.all统一等待所有转换完成，具体有几种实现方式：

1. 用async/await简化转换（最直观） #

你可以遍历files数组，对每个对象单独处理它的data属性，等待Promise解析后返回新的对象：

// 先把每个file对象转换成一个Promise，解析后得到data为Blob的对象
const resolvedFilesPromises = files.map(async (file) => {
  const blob = await file.data;
  return { ...file, data: blob };
});

// 等待所有Promise完成，得到最终的数组
const resolvedFiles = await Promise.all(resolvedFilesPromises);

这里的async函数会自动返回一个Promise，当await file.data完成后，就会生成一个新对象——保留原对象的所有其他属性（比如name），只把data替换成解析好的Blob。最后用Promise.all等待所有这些转换完成，就能得到你想要的结果。

2. 用Promise.then实现（不依赖async/await） #

如果你习惯用传统的Promise链式调用，也可以这么写：

const resolvedFilesPromises = files.map((file) => {
  return file.data.then((blob) => ({ ...file, data: blob }));
});

const resolvedFiles = await Promise.all(resolvedFilesPromises);

逻辑和上面完全一致，只是把await换成了then回调，返回新对象。

3. 封装成工具函数（复用更方便） #

如果你需要经常处理这类场景，完全可以自己封装一个类似你想象中Promise.all(files, 'data')的工具函数：

function promiseAllObjects(arr, propName) {
  return Promise.all(
    arr.map(item => 
      item[propName].then(resolvedVal => ({ ...item, [propName]: resolvedVal }))
    )
  );
}

// 调用的时候就非常简洁：
const resolvedFiles = await promiseAllObjects(files, 'data');

这个函数接受对象数组和要解析的属性名，内部自动完成转换和等待，用起来就和你想要的简化方法一模一样了。

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