Синхронизация Ajax-запросов в jQuery: ожидание завершения

Быстрый ответ

Для обеспечения одновременной обработки нескольких Ajax-запросов можно использовать функцию $.when() во взаимодействии с методом Array.prototype.map(), применяемым к вашим вызовам $.ajax(). После завершения всех запросов результата будут обработаны в обработчике .then().

let ajaxCalls = [/* массив настроек для Ajax-запросов */];
$.when(...ajaxCalls.map(settings => $.ajax(settings)))
  .then(function() {
    // Ваш код после успешного выполнения. Аргументы включают результаты запросов.
});

Обратите внимание на оператор расширения ..., он служит для передачи массива объектов Deferred, возвращаемых методом .map(), функции $.when(). Это эффективный способ синхронизации нескольких вызовов Ajax.

Отслеживаем динамику Ajax

Если количество Ajax-запросов заранее не определено, следует использовать динамически созданный массив объектов Deferred:

function performAjaxCalls(callSettingsArray) {
  let deferreds = callSettingsArray.map(settings => $.ajax(settings));
  // Создание динамической комбинации объектов Deferred и ajax с использованием when
  return $.when(...deferreds);
}

performAjaxCalls(dynamicSettingsArray).then(function() {
  // Все запросы успешно завершены
});

Помните, использование глобальных переменных для синхронизации запросов — не лучший выбор. Более предпочтительным является включение логики работы с Ajax в функции, следя за областью видимости.

Управляем успехами и неудачами

Для обработки случаев, когда запросы завершаются успешно или происходит ошибка, может быть использованы обработчики .then() и .fail().

performAjaxCalls(dynamicSettingsArray).then(function() {
  console.log("Все вызовы успешно завершены!");
}).fail(function() {
  console.log("Что-то пошло не так.");
});

Обработчики успешного выполнения и ошибок в отдельных методах делают Ajax-вызовы более надежными и устойчивыми.

Визуализация

Представьте jQuery Ajax-запросы как сотрудников, работающих над задачами:

Начало дня 🌞: [Боб 🧑, Алиса 👩, Том 🧑, Джейн 👩]

Задания на день 📋: [----------]

Работающие сотрудники 🏁: [Боб ✅, Алиса ✅, Том ✅, Джейн ✅]

Каждый сотрудник (в нашем контексте — Ajax-запрос) должен выполнить свою работу, прежде чем команда сможет отметить успешное завершение проекта:

$.when(Bob, Alice, Tom, Jane).done(function() {
  // Все задания выполнены. Пора праздновать успех! 🎉
});

Важно помнить, что загодя праздновать ещё рано — все задачи должны быть выполнены.

Введение в async/await для Ajax-запросов

Для более комфортного программирования можно использовать синтаксис async/await с новейшими версиями jQuery:

async function performAjaxCalls(ajaxSettingsArray) {
  try {
    await Promise.all(ajaxSettingsArray.map(settings => $.ajax(settings)));
    console.log("Все Ajax-запросы успешно выполнены. Пиво за мой счет 🍻");
  } catch (error) {
    console.error("Произошла ошибка в запросе, кто упустил мяч?", error);
  }
}

Такой подход окажется наглядным для обработки ошибок и не требует использования .then() или .fail().

Организация с помощью ajaxQueue

Для поддержания структурированного рабочего процесса применяются jQuery ajaxQueue или методы .queue() и .dequeue(). Они обеспечат управление Ajax-запросами, гарантируя последовательность выполнения и эффективную обработку обратных вызовов при обновлении пользовательского интерфейса.

Используем семафоры для управления Ajax-запросами

В случае необходимости более точного контроля над одновременно выполняемыми вызовами стоит рассмотреть использование семафоров. Вот пример их реализации:

let semaphore = 0;
function customAjaxCall(url, semaphoreOperation) {
  $.ajax({
    url: url,
    success: function(response) {
      // Отлично, ответ получен
      semaphoreOperation();
    },
    error: function() {
      // К сожалению, произошла ошибка
      semaphoreOperation();
    }
  });
}

function semaphoreUp() { semaphore++; } // Увеличиваем счетчик на 1
function semaphoreDown() { semaphore--; } // Уменьшаем счетчик на 1

// Пример использования
customAjaxCall("api/endpoint1", semaphoreUp);
customAjaxCall("api/endpoint2", semaphoreUp);
// ...ждем выполнения всех вызовов
if(semaphore === 0) {
  // Все запросы успешно выполнены!
}

Адаптируйте под свои цели логику работы семафоров — этот метод поможет вам избегать блокировок кода в ненужный момент.

Полезные материалы

1. jQuery.ajax() | jQuery API Documentation — официальная документация jQuery, охватывающая область запросов ajax.
2. Deferreds | jQuery Learning Center — ценное руководство по работе с jQuery.Deferred и Promise.
3. jQuery.when() | jQuery API Documentation — как контролировать несколько jQuery Ajax-запросов с помощью jQuery.when().
4. Синхронные и асинхронные запросы – Веб API | MDN — разъяснения касательно разницы между синхронными и асинхронными вызовами в JavaScript.
5. Использование Fetch API – Веб API | MDN — руководство по использованию Fetch для Ajax-вызовов, представляющее собой отличную альтернативу традиционным jQuery Ajax-запросам.