Axios.get().then() in a for loop

问题

How would I go about running Axios in a for loop, each with a corresponding .then() function. Then after the for loop ends, run another function.

Example:

const array = ['asdf', 'foo', 'bar'];
let users = [];
for (i = 0; i < array.length; i++) {
  axios.get('/user/' + array[i].id).then(response => {
    // do something with response
    users.push(response);
  });
}

console.log(users);

回答1:

const array = ['asdf', 'foo', 'bar'];
let users = [];
let promises = [];
for (i = 0; i < array.length; i++) {
  promises.push(
    axios.get('/user/' + array[i].id).then(response => {
      // do something with response
      users.push(response);
    })
  )
}

Promise.all(promises).then(() => console.log(users));

The .then() method of a Promise itself returns a Promise; so you can collect those and await all of them with Promise.all().

Note that even if you're doing this within an async function, you don't want to await inside the for-loop, because then each request will wait for the previous one to finish before it even starts, and presumably you want to run these requests in parallel.

Depending on your use case, a concise async / await function might look like this:

async getMultiple(...objectsToGet) {
  let users = [];
  await Promise.all(objectsToGet.map(obj =>
    axios.get('/user/' + obj.id).then(response => {
      users.push(response);
    })
  ));
  return users;
}

// some other async context
console.log(await getMultiple({ id: 'asdf'}, { id: 'foo' }, { id: 'bar' }));

回答2:

You should collect all the promises inside an array and use promise.all in the following manner -

const array = ['asdf', 'foo', 'bar'];
let promises = [];
for (i = 0; i < array.length; i++) {
  promises.push(axios.get('/user/' + array[i].id))
}

Promise.all(promises)
  .then(responses => console.log(responses));

回答3:

If you are using a more recent version of javascript with async/await support, you can do the following:

const array = ['asdf', 'foo', 'bar'];
let users = [];
for (const id in array) {
  const response = await axios('/user/' + id);
  users.push(response);
}

console.log(users);

来源：https://stackoverflow.com/questions/56532652/axios-get-then-in-a-for-loop

标签

javascript

promise

axios