我如何让 javascript 循环在开始下一次循环之前等待循环的每次迭代完成？

Question

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

类似于下面。

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

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

当 i < 1000 时：

5860
...

当我 < 1：

220,
...

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

Answer 1

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

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-await 模式。 您可以通过更改代码来实现此目的

 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) }) }) }

解释：

1. 我已将请求代码移动到单独的函数httpRequest 中，此函数将在成功时返回承诺
2. 我使用 await 关键字在 for 循环中调用了httpRequest ，现在循环将等待请求完成
3. 我还在函数中包装了 for 循环代码，因为您只能在 async 函数中使用 await