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's answer的基础上，我发现如果您在TypeScript中使用async/await功能（从需要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现在也是available for TypeScript code targeting ES5，也是TypeScript的master分支，很快将作为TypeScript 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。对于上面的代码，您只需要定义一个在异步函数返回后调用的回调函数。见下面的示例：

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

如何在Javascript

3 个答案: