TypeScript中forEach搭配async/await导致代码失效问题咨询

Array.prototype.forEach 方法本身不支持等待异步回调执行完成，传入的async回调会在执行到await时直接返回Pending状态的Promise，forEach只会触发所有回调，不会等待这些Promise状态变更，就会直接执行后续的return语句。此时getPersonInfo的异步请求还未返回结果，suggestedPeople数组还未被写入数据，因此返回结果不符合预期。

串行执行 #

如果你需要按顺序发起请求，可以使用for...of循环实现，循环上下文内的await会正常生效：

const peopleIds= ["John-01-01A", "Doe-01-01B", "Lily-01-01C"];
const suggestedPeople: KnownPeople[] = [];

for (const personId of peopleIds) {
  const personInfo = await getPersonInfo(personId);
  const PersonModel: IPersonInfo = {
    id: personInfo.id,
    info: personInfo,
  };
  suggestedPeople.push(PersonModel as KnownPeople);
}

return suggestedPeople;

并行执行 #

如果你不需要请求按顺序执行，想要更高的请求效率，可以使用Promise.all等待所有异步请求完成：

const peopleIds= ["John-01-01A", "Doe-01-01B", "Lily-01-01C"];

const personPromises = peopleIds.map(async (personId) => {
  const personInfo = await getPersonInfo(personId);
  const PersonModel: IPersonInfo = {
    id: personInfo.id,
    info: personInfo,
  };
  return PersonModel as KnownPeople;
});

const suggestedPeople = await Promise.all(personPromises);
return suggestedPeople;

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