📘 Урок 13: jQuery Deferred и Promises — работа с асинхронностью

Оглавление

📌 Заключение

Цель: разобраться, что такое Deferred и Promises в jQuery, и как с их помощью удобно работать с асинхронными операциями — Ajax, таймерами и другими.

🔹 Что такое Deferred и Promises?

Когда выполняется асинхронная операция (например, Ajax-запрос), результат приходит не сразу. Чтобы удобно управлять такими операциями, используются объекты Deferred и Promise — они позволяют регистрировать функции обратного вызова (callbacks), которые сработают при успехе, ошибке или завершении операции.

🔸 Deferred — объект управления асинхронной операцией

Deferred позволяет:

Зарегистрировать обработчики .done(), .fail(), .always()
Принудительно разрешить (resolve()) или отклонить (reject()) операцию
Создать цепочки вызовов

🔸 Promise — часть Deferred, с которой работает код

Promise — это объект, через который вы подписываетесь на события: когда задача выполнена или провалилась.

🔸 Пример создания Deferred вручную

function asyncTask() {
  let d = $.Deferred();

  setTimeout(function() {
    if (Math.random() > 0.5) {
      d.resolve('Успех!');
    } else {
      d.reject('Ошибка!');
    }
  }, 1000);

  return d.promise();
}

asyncTask()
  .done(function(msg) { console.log('Done: ' + msg); })
  .fail(function(msg) { console.log('Fail: ' + msg); })
  .always(function() { console.log('Задача завершена'); });

🔸 Использование Deferred с Ajax

jQuery Ajax-методы возвращают Promise:

$.get('/data.json')
  .done(function(data) {
    console.log('Данные получены', data);
  })
  .fail(function() {
    console.log('Ошибка загрузки');
  })
  .always(function() {
    console.log('Запрос завершён');
  });

🔸 Цепочки и комбинации Deferred

.then(success, fail) — для обработки результата и ошибки
$.when() — ждать несколько Deferred одновременно

let d1 = $.Deferred();
let d2 = $.Deferred();

$.when(d1, d2).done(function(r1, r2) {
  console.log('Обе задачи завершены', r1, r2);
});

setTimeout(() => d1.resolve('Первый'), 1000);
setTimeout(() => d2.resolve('Второй'), 1500);

🔸 Практические задачи с Deferred

Асинхронная загрузка нескольких файлов
Последовательное выполнение Ajax-запросов
Отложенное выполнение кода

🔸 Обработка ошибок

fail() позволяет ловить ошибки. Можно регистрировать несколько обработчиков.

📋 Задания для практики

Создай функцию с Deferred, которая через 2 секунды «решает» результат.
Сделай Ajax-запрос с обработкой .done(), .fail(), .always().
Используй $.when() для параллельных запросов и вывода результата после всех.
Напиши цепочку .then() с разными обработчиками.
Попробуй вручную отклонять Deferred и смотреть обработку ошибок.

❗ Частые ошибки

❌ Забыт вызов `.promise()` при возврате Deferred

Нужно возвращать d.promise(), чтобы скрыть методы resolve() и reject().

❌ Ошибка понимания, что `.then()` — это и `.done()`, и `.fail()`

.then() принимает два колбэка: первый — успех, второй — ошибка.

📌 Заключение

Deferred и Promises — важный инструмент для управления асинхронностью в jQuery. Они делают код чистым, понятным и легко масштабируемым.

Jquery

+ Читать