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

Question

我试图在内部提出async请求foreach,以便用户稍后获取数据,但它不适用于我.

我知道Array.Foreach是一个同步函数,所以我甚至尝试过$ .when.done但它仍然没有等到它完成.

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

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

   AsynchFunction();

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

我想得到一个输出

步骤1

第2步

Answer 1

基于@ basarat的答案,我发现如果你async/await在TypeScript 中使用这个功能(从需要ES6目标的TS 1.7开始),这个效果非常好:

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现在可用的打字稿代码瞄准ES5在还有master打字稿的分公司,即将推出的为打字稿2.1.您可以使用今天安装它npm install --save-dev typescript@next

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

Answer 2

是否有更好的方法通过回调来处理这个问题,以便在下一步移动之前实现等待异步请求

如果您使用promises,您可以使用如下函数Promise.all:

var promises = browseItems.map((browseItem: any) => AsynchFunction());
Promise.all(promises).then((values)=>{});

Answer 3

一旦开始使用异步函数，您可以选择以下两种方式之一：callbacks或promises。对于上面的代码，您只需要定义一个回调函数，以便在 async 函数返回后调用。请参阅下面的示例：

browseItems.forEach((browseItem: any) => {
   AsynchFunction(postProcess);   
}
function AsynchFunction(callback){
   console.log("Step 1");
   if(asyncProcessDone){
       callback();
   }
}
function postProcess(){
    console.log("Step 2")
}