为什么对map生成的promise数组直接await无效，需使用Promise.all？

基础规则前置 #

• 所有被async关键字标记的函数，无论内部返回值是什么类型，最终返回结果永远是一个Promise对象
• await关键字仅对单个Promise对象生效：如果await后跟随的不是Promise实例，会直接返回该值本身，不会做任何异步解析处理

第一种写法的问题 #

你的第一种写法中：

const newStuff = await results.map(async (response) => {
  try {
    const recipeDetail = await response.json();
    return recipeDetail;
  } catch (err) {
    console.log("error1: ", err);
  }
})

results.map的回调是async函数，因此map执行完成后返回的是由Promise实例组成的数组，而非单个Promise。你直接对这个普通数组使用await，await不会做任何解析操作，直接将这个Promise数组赋值给newStuff，因此打印出来的是一堆pending状态的Promise。

第二种写法的生效逻辑 #

第二种写法给map返回的Promise数组外层包裹了Promise.all()：

const newStuff = await Promise.all(results.map(async response => {
  let recipeDetail = await response.json();
  return recipeDetail;
}));

Promise.all()接收一个Promise数组作为入参，会返回单个Promise实例，这个实例会等到数组中所有Promise都resolve之后，才会resolve为所有结果组成的数组。此时你再用await等待这个单个Promise，自然就能拿到所有解析完成的结果数组。

如果需要保留第一种写法里的错误捕获逻辑，只需要把try/catch放在map的回调函数中，外层依然包裹Promise.all()即可：

const newStuff = await Promise.all(results.map(async (response) => {
  try {
    const recipeDetail = await response.json();
    return recipeDetail;
  } catch (err) {
    console.log("error1: ", err);
    return null; // 可自定义错误场景的返回值
  }
}))

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