Javascript：等待循环内问题

Question

I want to use Eslint plugin in my project with Webpack but it does not let me use await inside the loop.

According to Eslint docs it recommends to remove await from the loop and just add a Promise after.

Wrong example:

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

Correct example:

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

---

But in my code I just merge data into one array which comes from HTTP request:

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

Is it possible to remove await from this loop and add Promise just for array concatenation? I don't have an idea how to do it...

Answer 1

If you like one-liners.

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

In this case, the map method returns a bunch of promises, based on the URL, and your getData method. The Promise.all waits until all of your promises will be resolved. These promises run parallel.

Answer 2

You can use promise like this:

 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

If I'm understanding you correctly, your getData function returns an array?

Using the one-liner supplied by Anarno , we can wait until all promises are resolved and then concatenate all the arrays.

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

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