TypeScript中使用Promise.all如何正确返回异步请求结果？

问题原因 #

这是JavaScript异步执行顺序的典型问题：

• Promise.all以及它的.then回调都属于异步任务，不会阻塞主程序同步执行
• 调用get_photos时，主程序会同步跑完所有同步逻辑：先构造promises数组、触发Promise.all执行，之后立刻返回当前的photos_info（此时还是初始化的空数组）
• 等到所有fetch请求完成、.then回调触发时，才会给photos_info赋值，所以函数内部的打印能拿到正常结果，但外部提前拿到的返回值还是之前的空数组。

修复方案 #

直接让get_photos返回Promise实例，外部通过.then或者async/await获取结果即可：

方案1：返回Promise + 外部.then调用 #

function get_photos(urls) {
  const promises = urls.map(url => fetch(url).then(y => y.json()));
  // 直接将Promise.all返回出去
  return Promise.all(promises);
}

// 外部调用
get_photos(urls).then(list_of_photos => {
  console.log("result of the function", list_of_photos);
  // 所有处理list_of_photos的逻辑都要写在这个回调内部
})

方案2：搭配async/await语法（可读性更高） #

async function get_photos(urls) {
  const promises = urls.map(url => fetch(url).then(y => y.json()));
  const results = await Promise.all(promises);
  // 此处可添加你需要的结果处理逻辑
  return results;
}

// 外部调用需要放在async函数内，或者继续用.then
(async () => {
  const list_of_photos = await get_photos(urls);
  console.log("result of the function", list_of_photos);
  // 所有处理list_of_photos的逻辑都写在这里
})();

内容的提问来源于stack exchange，提问作者Menna T-Allah Magdy