使用.map()搭配异步回调遗漏return语句，为何仍能等待所有Promise？

以下两段代码执行效果完全一致，但从直觉上很容易误解第二段的行为：

片段1（规范写法） #

const myArray = [1, 2, 3, 4];

const asyncTask = (name) => {
  return new Promise((resolve) => setTimeout(() => {
    const result = `resolved: ${name}`
    console.log({ result })
    resolve(result)
  }, 1000));
};

(async () => {
  console.log('start');

  const promises = myArray.map((value) => {
    return asyncTask(`task-${value}`);
  });

  await Promise.all(promises);

  console.log('end');
})();

片段2（不规范但执行符合预期的写法） #

const myArray = [1, 2, 3, 4];

const asyncTask = (name) => {
  return new Promise((resolve) => setTimeout(() => {
    const result = `resolved: ${name}`
    console.log({ result })
    resolve(result)
  }, 1000));
};

(async () => {
  console.log('start');

  const promises = myArray.map(async (value) => {
    await asyncTask(`task-${value}`);
  });
  
  await Promise.all(promises);

  console.log('end');
})();

问题核心 #

原本认为片段2中，map的async回调缺少return语句，promises应该是Promise<void>[]，await Promise.all(promises)会直接跳过等待，先输出end再执行异步任务的结果，但实际输出顺序是：

> 'start'
> *Promise执行结果*
> 'end'

原因解析 #

1. async函数的特性：所有async函数，无论是否有显式return，都会返回一个Promise对象。如果没有return值，这个Promise会在函数内部所有await的异步操作完成后，以undefined为结果resolve。
2. 片段2的实际逻辑：map的async回调里await asyncTask(...)，意味着这个回调返回的Promise，必须等待asyncTask的Promise resolve后，才会自己resolve。
3. Promise.all的行为：Promise.all会等待传入的所有Promise都resolve后才会resolve，因此片段2中它会等待所有async回调返回的Promise（也就是等待所有asyncTask完成），之后才会执行后续的console.log('end')。

重要提示：请勿编写此类代码 #

这种写法属于不规范的隐含逻辑，可读性极差，维护者很容易误以为这里没有等待逻辑，进而修改代码导致bug。正确的写法应该：

• 要么像片段1一样，直接return异步任务的Promise；
• 如果需要在async回调里执行额外逻辑，必须显式写出return（哪怕是return undefined），明确表达等待意图。

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