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

Question

我正在尝试在foreach内提出async请求，以便稍后为用户提取数据，但它不适用于我。

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

我可以使用回调，如果它是一个单一的值，但它的数组。 有没有更好的方法来处理这个回调，以实现等待async之后再移动呢？

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

    AsynchFunction(); 

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

我试图得到一个输出像

步骤1

步骤2

Answer 1

一旦你开始使用异步函数，你去以下两种方式：callbacks或promises。在上面的代码中，你只需要定义一个在异步函数返回后调用的回调函数。请参见下面的示例：

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

Answer 2

是否有更好的方式，通过回调来处理这个实现移动未来

如果您正在使用的承诺，你可以使用一个函数像Promise.all前等待异步REQ ：

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

Answer 3

大厦@basarat's answer，我发现这工作得很好，如果你使用的是T中的async/await功能ypeScript（如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以及在打字稿的master分支，即将发布的打字稿2.1。您可以使用npm install --save-dev [email protected]

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