Разгребаем асинхронные задачи с помощью Promise-объектов jQuery

Promise-объекты представляют собой одну из впечатляющих особенностей jQuery, которая позволяет легко управлять асинхронными событиями. С их помощью вы будете  писать более понятные, короткие возвратные функции и отделять высокоуровневую логику приложений от низкоуровневых операций.

Как только вы разберетесь с Promise-объектами, то будете всегда использовать их для любых AJAX вызовов в интерфейсе своего приложения.

Общее описание Promise-объектов

Promise-объект представляет одноразовое событие, обычно исходящую асинхронную задачу, например вызов AJAX. Сначала Promise-объект имеет состояние pending (в ожидании). После завершения события состояние принимает значение либо resolved (задача выполнена) или rejected (если задача завершилась ошибкой). Как только Promise-объект принимает состояние resolved или rejected, он остается в нем навсегда и его возвратная функция никогда не запустится снова.

Вы можете привязывать возвратную функцию к Promise-объекту. Она будет запускаться, когда объект будет принимать состояние resolved или rejected. Можно добавлять другие возвратные функции в любой момент времени, даже после принятия объектом состояния resolved/rejected (в данном случае функция выполняется немедленно).

Кроме того, можно комбинировать Promises-объекты логически в новый объект. Такая техника позволяет легко создавать код, который будет выполнять инструкции по типу "когда все данные события произойдут, сделай следующую операцию".

Существует несколько реализаций Promise-объектов для JavaScript. Наиболее известные: проект q, разработанный  Kris Kowal, который основан на спецификации CommonJS Promises/A, и jQuery Promises (добавлен в версию jQuery 1.5). В данном уроке рассматривается реализация для jQuery.

Создаем Promise-объект с помощью $.deferred

Каждый Promise-объект в jQuery начинается с Deferred-объекта. Deferred-объект - это Promise-объект с методами, которые позволяют владельцу изменять его состояние. Все остальные Promises-объекты являются копиями "только для чтения" Deferred-объекта.  Чтобы создать Deferred-объект нужно использовать конструктор $.Deferred():

var deferred = new $.Deferred();
 
deferred.state();  // "pending"
deferred.resolve();
deferred.state();  // "resolved"
deferred.reject(); // нет эффекта, потому что Promise-объект уже изменил состояние

Примечание: метод state() был добавлен в jQuery 1.7. В версиях 1.5/1.6 надо использовать методы isRejected() и isResolved().

Мы можем получить "чистый" Promise-объект вызвав метод promise(). Результат будет идентичен Deferred-объекту за исключением отсутствия методов  resolve() и reject().

var deferred = new $.Deferred();
var promise = deferred.promise();
 
promise.state();  // "pending"
deferred.reject();
promise.state();  // "rejected"

Метод promise() существует для реализации инкапсуляции: если возвращать Deferred-объект из функции, его состояние может быть изменено вызывающим кодом. Но если вы возвращаете "чистый" Promise-объект, соответствующий Deferred-объекту, то вызывающий код сможет только прочитать его состояние и привязать возвратную функцию. В jQuery используется такой подход: "чистый" Promise-объект возвращается из методов AJAX:

var gettingProducts = $.get("/products");
 
gettingProducts.state();  // "pending"
gettingProducts.resolve;  // неопределенно

Моделирование потоков интерфейса с использованием Promise-объектов

Как только у вас появится Promise-объект, вы сможете присоединять к нему сколько угодно возвратных функций с помощью методов done(), fail(), и always():

promise.done(function() {
  console.log("Данный код выполняется, когда Promise-объект получает состояние resolved.");
});
 
promise.fail(function() {
  console.log("Данный код выполняется, когда Promise-объект получает состояние rejected.");
});
 
promise.always(function() {
  console.log("Данный код выполняется в любом случае.");
});

Примечание: в версиях jQuery до 1.6 метод always() метод назывался complete() before jQuery 1.6.

Также есть короткая запись для присоединения всех типов возвратных функций за один вызов, метод then():

promise.then(doneCallback, failCallback, alwaysCallback);

Одним из преимуществ использования Promise-объектов является представление серии потенциальных действий пользователя. Для примера рассмотрим типовую форму AJAX. Нужно обеспечить однократную отправку формы и выдачу пользователю подтверждения того, что форма отправлена.  Также нужно разделить код, который отвечает за функционал приложения от кода, который взаимодействует с разметкой страницы. Такой подход облегчит тестирование и модификацию кода в случае изменения шаблона страницы.

// Логика приложения
var submittingFeedback = new $.Deferred();
 
submittingFeedback.done(function(input) {
  $.post("/feedback", input);
});
 
// Взаимодействие с DOM
$("#feedback").submit(function() {
  submittingFeedback.resolve($("textarea", this).val());
 
  return false;  // останавливаем действие по умолчанию
});
submittingFeedback.done(function() {
  $("#container").append("<p>Благодарим вас за ваш отзыв!</p>");
});

Получаем Promise-объект из будущего

Наша форма обратной связи выглядит хорошо, но есть еще места, которые можно улучшить. Кроме оптимистичного предположения, что запрос POST успешно прошел, нужно вывести индикацию об отправке формы (например, вращающийся индикатор), а затем сообщить пользователю ответ сервера об успехе или ошибке.

Можно решить задачу с помощью привязывания возвратной функции к Promise-объекту, который возвращается $.post. Но здесь есть вызов: нужно манипулировать структурой DOM из возвратной функции, а мы хотели отделить код работы с DOM от кода логики приложения. Как поступить в данном случае, когда Promise-объект POST создается в возвратной функции логики приложения?

Решение заключается в “передаче” событий resolve/reject из Promise-объекта POST в Promise-объект, который находится во внешнем пространстве имен. jQuery имеет метод для таких операций: pipe().

Метод pipe() имеет такой же интерфейс, как и метод then() (возвратная функция done(), возвратная функция reject(), возвратная функция always(); каждая возвратная функция опциональна), но с одним критическим отличием. Метод then() просто возвращает привязанный Promise-объект (для внесения изменений), а метод  pipe() возвращает новый Promise-объект, который имитирует любой Promise-объект, возвращаемый из одной из возвратных функций метода pipe(). Другими словами, метод pipe() является окном в будущее, позволяя привязывать функцию к Promise-объекту, которого еще не существует.

Вот новый и улучшенный код, с Promise-объектом POST, который присоединяется к Promise-объекту savingFeedback:

// Логика приложения
var submittingFeedback = new $.Deferred();
var savingFeedback = submittingFeedback.pipe(function(input) {
  return $.post("/feedback", input);
});
 
// Взаимодействие с DOM
$("#feedback").submit(function() {
  submittingFeedback.resolve($("textarea", this).val());
 
  return false;  // предотвращаем действие по умолчанию
});
 
submittingFeedback.done(function() {
  $("#container").append("<div class='spinner'>");
});
 
savingFeedback.then(function() {
  $("#container").append("<p>Благодарим вас за ваш отзыв!</p>");
}, function() {
  $("#container").append("<p>произошла ошибка при соединении с сервером.</p>");
}, function() {
  $("#container").remove(".spinner");
});

Создаем сочетания  Promise-объектов

Promise-объекты имеют бинарную сущность. Так как они могут находиться только в двух состояниях, то их можно комбинировать, как логические переменные (хотя у таких переменных значение может быть еще не определено).

Эквивалент логической функции (AND) для Promise объектов выполняется методом $.when(). Получая список Promise-объектов, метод when() возвращает новый Promise-объект, который выполняет следующие правила:

1. Когда все заданные Promise-объекты имеют состояние resolved, новый Promise-объект также будет иметь состояние resolved.
2. Когда любой из заданных Promise-объектов имеет состояние rejected, новый Promise-объект также имеет состояние rejected.

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

Одновременные запросы AJAX могут выполняться таким образом:

$("#container").append("<div class='spinner'>");
$.when($.get("/encryptedData"), $.get("/encryptionKey")).then(function() {
  // оба AJAX запроса успешны
}, function() {
  // один из запросов AJAX завершился с ошибкой
}, function() {
  $("#container").remove(".spinner");
});

Другой случай использования данной техники - запрос ресурса, который может быть уже занят. Например, предположим, что у нас есть виджет чата, который загружается библиотекой YepNope:

var loadingChat = new $.Deferred();
yepnope({
  load: "resources/chat.js",
  complete: loadingChat.resolve
});
 
var launchingChat = new $.Deferred();
$("#launchChat").click(launchingChat.resolve);
launchingChat.done(function() {
  $("#chatContainer").append("<div class='spinner'>");
});
 
$.when(loadingChat, launchingChat).done(function() {
  $("#chatContainer").remove(".spinner");
  // Запуск чата
});

Заключение

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

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