loops - How to do something after multiple aysnc requests in Javascript

Question

I have multiple async request running inside 2 loops. I want to reload the page when All the requests inside BOTH loops are done.

I'm a bit confused about this.

If I had one request I would just call window.location.reload in a then block.

If I had two requests I would make the other request in first then block and call window.location.reload inside the second request then block

How should I do this?

seImages.forEach((seImage) => {
  const se_image = {
    image: seImage.image,
    alt_text: seImage.alt_text,
    landing_page: newLp.id,
    csrfmiddlewaretoken: getCookie('csrftoken'),
  };

  const newSeImage = urlEncodedFormData(se_image);

  postFormData(
    ui.urls.createSeImage(),
    newSeImage
  ).then((resp) => console.log(resp));
});

vpPoints.forEach((vpPoint) => {
  const vp_point = {
    point: vpPoint.point,
    description: vpPoint.description,
    landing_page: newLp.id,
    csrfmiddlewaretoken: getCookie('csrftoken'),
  };

  const newVpPoint = urlEncodedFormData(vp_point);
  postFormData(
    ui.urls.createVpPoint(),
    newVpPoint
  ).then((resp) => console.log('VpPoint: ', resp));
});

question from:https://stackoverflow.com/questions/65884549/how-to-do-something-after-multiple-aysnc-requests-in-javascript

Answer 1

You create an array like const promises = []; and push all the promises promises.push(fetch(...));. After all functions are started and all promises are stored you can simply wait for await Promise.all(promises);

const promises = [];

seImages.forEach((seImage) => {
  const se_image = {
    image: seImage.image,
    alt_text: seImage.alt_text,
    landing_page: newLp.id,
    csrfmiddlewaretoken: getCookie('csrftoken'),
  };

  const newSeImage = urlEncodedFormData(se_image);

  promises.push(postFormData(
    ui.urls.createSeImage(),
    newSeImage
  ).then((resp) => console.log(resp)));
});

vpPoints.forEach((vpPoint) => {
  const vp_point = {
    point: vpPoint.point,
    description: vpPoint.description,
    landing_page: newLp.id,
    csrfmiddlewaretoken: getCookie('csrftoken'),
  };

  const newVpPoint = urlEncodedFormData(vp_point);
  promises.push(postFormData(
    ui.urls.createVpPoint(),
    newVpPoint
  ).then((resp) => console.log('VpPoint: ', resp)));
});

(async function () {
    await Promise.all(promises);
    // window.location.reload
})();