Async/Await 无法按预期使用 for 循环语句

Question

我是 Javascript 和 nodejs 的新手。 在尝试了解 promise 和回调如何工作时，我尝试在“for”循环中调用一个函数，如下所示。 我试图实现的是使用承诺每 2 秒打印一次“i”值。 但是，程序等待 2 秒并打印 i 值 3 次并退出。

for(let i = 0; i < 3 ; i++){
    func(callback,i);
}

async function func(callback,i){
   await callback(i);
}
function callback(i){
    return new Promise((res,rej) =>{
        setTimeout(()=>{
            console.log('i = ',i)
            res();
        }, 2000);

    })
}

有人可以帮我理解为什么会这样吗？

Answer 1

你可以用async立即执行的函数包装你的循环并在其中添加await （正如这里已经建议的那样）：

 (async () => { for(let i = 0; i < 3 ; i++){ await callback(i); } })(); function callback(i){ return new Promise((res,rej) =>{ setTimeout(()=>{ console.log('i = ',i) res(); }, 2000); }) }

这是我在 Bergi 编辑之前的原始答案：

(async () => {
  for(let i = 0; i < 3 ; i++){
    await func(callback,i);
  }
})()

async function func(callback,i){
  await callback(i);
}

function callback(i){
  return new Promise((res,rej) =>{
    setTimeout(()=>{
      console.log('i = ',i)
      res();
    }, 2000);
  })
}

Answer 2

你很接近。 缺少的信息是async函数（您的func() ）隐式返回一个AsyncFunction对象，该对象也隐式返回一个 Promise 本身（ doc ）。

您使用立即调用的函数表达式的代码将是

(async () => {
    for(let i = 0; i < 3 ; i++){
        await func(callback,i);
    }
})()

async function func(callback,i){
   await callback(i);
}
function callback(i){
    return new Promise((res,rej) =>{
        setTimeout(()=>{
            console.log('i = ',i)
            res();
        }, 2000);
    })
}

请注意现在在大多数浏览器中都可以使用for await..of ( doc ) 的构造。 你也可以试试这个。

Answer 3

这里有一些函数可以帮助你理解 Promise 是如何与数组一起工作的，在这些函数中我们会犯一些常见的错误。

 function promiseFunction(v) { return new Promise((resolve) => { setTimeout(() => resolve(v), 1000); }); } function f1() { [1, 2, 3, 4]. forEach(async(i) => { const v = await promiseFunction(i); console.log(`-f1 v- ${v}<br/>`); }); console.log('all done<br/>'); } async function f2() { await Promise.all([1, 2, 3, 4].map(async(i) => { const v = await promiseFunction(i); console.log(`-f2 v- ${v}<br/>`); })); console.log('all done<br/>'); } async function f3() { await [1, 2, 3, 4].reduce((p, i) => { return p.then(async () => { const v = await promiseFunction(i); console.log(`-f3 v- ${v}<br/>`); }); }, Promise.resolve()); console.log('all done<br/>'); } async function func() { console.log('f1'); await f1(); console.log('f2'); await f2(); console.log('f3'); await f3(); } func();

f1() 将首先打印all done ，然后在一秒钟后立即打印 1,2,3,4。
f2() 将在一秒钟后立即打印 1,2,3,4 然后打印all done 。
f3() 将每秒打印 1,2,3,4 ，然后打印all done 。

Answer 4

您需要等待异步功能完成

for(let i = 0; i < 3 ; i++){
    await func(callback,i);
}

但是由于您不能在全局范围内使用await关键字，因此您需要将for循环包装在一个异步函数中，然后再调用它

async function myTest(){
    for(let i = 0; i < 3 ; i++){
        await func(callback,i);
    }
}
myTest()

Answer 5

您的异步函数 func 也返回一个承诺，因此您需要在调用之前使用 await 关键字。

for(let i = 0; i < 3 ; i++){
    await func(callback,i);
}