在JavaScript的map回调中调用async函数后执行reduce无法运行问题

async函数的返回值永远是Promise类型，你使用map调用异步回调时，得到的不是预期的[1,2]数组，而是[Promise<1>, Promise<2>]的Promise对象数组，直接对这个数组执行reduce操作，相当于把两个Promise对象直接拼接，无法得到你预期的数值计算结果。

需要先等待所有map生成的Promise全部执行完成，再对返回的实际结果数组执行reduce操作：

const a = [1, 2];
async function f() {}

async function run() {
  // 等待所有异步回调执行完成，拿到实际返回值数组
  const mappedResults = await Promise.all(a.map(
    async (x, i) => {
      await f();
      const val = x;
      alert(val);
      return val;
    }
  ));
  // 对普通数值数组执行reduce，记得加初始值0避免空数组报错
  const test = mappedResults.reduce((result, element) => result + element, 0);
  console.log(test); // 输出预期结果3
}
run();

如果你不想额外封装async函数，也可以用.then的写法：

Promise.all(a.map(async (x) => {
  await f();
  alert(x);
  return x;
})).then(mappedResults => {
  const test = mappedResults.reduce((res, cur) => res + cur, 0);
  // 后续处理test的逻辑都写在这里
})

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