Javascript: await 内部循环问题

Question

我想在带有 Webpack 的项目中使用 Eslint 插件，但它不允许我在循环中使用 await。

According to Eslint docs 建议从循环中删除 await 并在后面添加一个 Promise。

错误示例：

async function foo(things) {
  const results = [];
  for (const thing of things) {
    // Bad: each loop iteration is delayed until the entire asynchronous operation completes
    results.push(await bar(thing));
  }
  return baz(results);
}

正确示例：

async function foo(things) {
  const results = [];
  for (const thing of things) {
    // Good: all asynchronous operations are immediately started.
    results.push(bar(thing));
  }
  // Now that all the asynchronous operations are running, here we wait until they all complete.
  return baz(await Promise.all(results));
}

但在我的代码中，我只是将数据合并到一个来自 HTTP 请求的数组中：

async update() {
   let array = [];
   for (url of this.myUrls) {
      const response = await this.getData(url);
      array = await array.concat(response);
   }
}

是否可以从此循环中删除 await 并添加 Promise 仅用于数组连接？我不知道该怎么做...

Answer 1

如果你喜欢单线

const array = await Promise.all(this.myUrls.map((url)=> this.getData(url)));

在这种情况下，map 方法 returns 一堆基于 URL 和您的 getData 方法的承诺。 Promise.all 等到你所有的承诺都得到解决。这些承诺运行并行。

Answer 2

你可以这样使用 promise：

 function update() {
   let array = [],req=[];
    for (url of this.myUrls) {
     req.push(this.getData(url));
    }
   return Promise.all(req).then((data)=>{
     console.log(data);
    return data;
   })
  }

Answer 3

如果我没理解错的话，你的 getData 函数 returns 是一个数组？

使用 Anarno 提供的单行代码，我们可以等到所有承诺都已解决，然后连接所有数组。

const allResults = await Promise.all(this.myUrls.map((url) => this.getData(url)));

let finalArray = [];
allResults.forEach((item) => finalArray = finalArray.concat(item));

Javascript: await 内部循环问题

Javascript: await inside of loop issue

javascript

async-await

eslint

es6-promise