Как что-то сделать после нескольких запросов aysnc в Javascript

#javascript #loops #asynchronous

#javascript #циклы #асинхронный

Вопрос:

У меня есть несколько асинхронных запросов, выполняемых внутри 2 циклов. Я хочу перезагрузить страницу, когда будут выполнены все запросы внутри ОБОИХ циклов.

Я немного смущен этим.

Если бы у меня был один запрос, я бы просто вызвал window.location.reload в блоке then.

Если бы у меня было два запроса, я бы сначала сделал другой запрос, а затем заблокировал и вызвал окно.location.reload внутри второго запроса затем блокирует

Как мне это сделать?

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

Комментарии:

1. Сохраните обещания в массиве и дождитесь Promise.all .

2. Array.prototype.map() Promise.all()

3. @ThomasSablik Должен ли я добавлять 2 Promise.all() внутри циклов? можете ли вы привести мне пример. Я использую выборку для выполнения запросов.

4. Вы создаете массив типа const promises = []; и выполняете все обещания promises.push(fetch(...)); . После запуска всех функций и сохранения всех обещаний вы можете просто подождать await Promise.all(promises);

5. @Andreas Зачем нам здесь нужна карта?

Ответ №1:

Вы создаете массив типа const promises = []; и выполняете все обещания promises.push(fetch(...)); . После запуска всех функций и сохранения всех обещаний вы можете просто подождать 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
})();