javascript - 如何在 Javascript 中的 array.forEach 中等待异步函数

Question

我正在尝试在 foreach 中发出一个 async 请求以获取数据以便稍后用户使用它，但它对我不起作用。

我知道 Array.Foreach 是一个同步函数，所以我什至尝试了 $.when.done 但它仍然不会等到它完成。

如果它是单个值但它是一个数组，我本可以使用回调。有没有更好的方法通过回调来处理这个问题，以实现在下一步移动之前等待 async 请求？

browseItems.forEach((browseItem: any) => {

   AsynchFunction();

   cosole.log("Step 2")  
}
function AsynchFunction(){
   console.log("Step 1")
}

我正在尝试获得类似的输出

第一步

第 2 步

Answer 1

基于 @basarat's answer ，我发现如果您在 TypeScript 中使用 async/await 功能(从 TS 1.7 开始需要 ES6 目标)，这会非常有效:

async function processData(data: any[]) {
  const promises = data.map(async (item) => {
    await doSomeAsyncStuff(item);
    //you can do other stuff with the `item` here
  });
  await Promise.all(promises);

  //you can continue with other code here that will execute after all the async code completes
}

async function doSomeAsyncStuff(value) {
  return new Promise((resolve, reject) => {
    //call some async library or do a setTimeout and resolve/reject the promise
  });
}

更新:async 和await 现在是available for TypeScript code targeting ES5以及 TypeScript 的 master 分支，很快将作为 TypeScript 2.1 发布。您现在可以使用 npm install --save-dev typescript@next

安装它

更新:此功能适用于当前版本的 TypeScript 中的所有 ES 目标。我注意到的一个警告是，如果你的目标是 ES5 或 ES3，你将需要提供一个 Promise polyfill，否则代码将在旧浏览器上失败。