我如何让 javascript 循环等待循环的每次迭代完成，然后再开始下一次循环？

Question

我有一个迭代 1000 次的循环，每次迭代都会发出请求，然后打印该请求的结果。

类似于下面。

let start = console.log(Date.now())
for (i = 0; i < 1000; i++) {
    request.then(data => {
        console.log(Date.now() - start)
    })
}

然而，如果只有 1 次循环迭代，这会导致第一个请求需要更长的时间才能完成。

我 < 1000:

5860
...

我 < 1:

220,
...

然而，为了这个脚本的目的，我想在开始循环的下一次迭代之前等待收到每个结果。

Answer 1

如果您想坚持使用 ES5 处理 Promises 的方式，您可以使用以下方法：

const start = console.log(Date.now())

// Create a instantly resolved promise
for (let i = 0, p = Promise.resolve(); i < 1000; i++) {
  // append new promise to the chain
  p = p.then(() => request()
       .then(() => console.log(Date.now() - start));
}

如果你可以使用 ES6 方法，你可以使用 async/await 模式来写这个：

const asyncLoop = async () => {
  const start = console.log(Date.now())

  for (let i = 0; i < 1000; i++) {
    const data = await request();
    console.log(Date.now() - start);
  }
}

asyncLoop();

虽然你真的想要一个接一个地提出请求的可能性实际上很小，所以如果你想同时提出请求，但在所有问题都解决后再做一些事情，你可以使用 Promise.all(...)

const start = console.log(Date.now())
const requests = [request1, request2, ...];

Promise.all(requests)
       .then(() => console.log(Date.now() - start));

Answer 2

您可以在此处使用异步等待模式。您可以通过更改代码来实现此目的

async function iteration() {
    let start = console.log(Date.now())
    for (let i = 0; i < 1000; i++) {
        const data = await httpRequest()
        console.log(Date.now() - start)
    }

}

async function httpRequest() {
    return new Promise((resolve, reject) => {
        request.then(data => {
            //Do anything you want to do with data
            resolve(data)
        }).catch(error => {
            console.error(`Error in request`)
            reject(error)
        })
    })
}

说明：

我已将请求代码移至单独的函数 httpRequest 并且此函数将 return 承诺成功
我使用 await 关键字在 for 循环中调用了 httpRequest，现在循环将等待请求完成
我还在函数中包装了 for 循环代码，因为您只能在异步函数中使用 await

我如何让 javascript 循环等待循环的每次迭代完成，然后再开始下一次循环？

How do i make javascript loop wait for each iteration of loop to finish before starting the next?

javascript

loops

request