0Pricing
jQuery Academy · Урок

Изучение отложенных объектов

Разберитесь в основных понятиях отложенных объектов jQuery, узнайте, как они представляют асинхронные операции, и изучите их состояния: ожидание, выполнено и отклонено.

«Изучение отложенных объектов» — бесплатный урок jQuery Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.

Асинхронные операции и функции обратного вызова

В веб-разработке многие задачи выполняются не мгновенно. Например, получение данных с сервера или ожидание щелчка пользователя. Это асинхронные операции.

Традиционно для этого используют функции обратного вызова: функции, которые запускаются только после завершения асинхронной задачи. Однако вложенные функции обратного вызова могут привести к «аду обратных вызовов», из-за чего код становится сложным для чтения и сопровождения.

Знакомство с Deferred в jQuery

Здесь на помощь приходят объекты Deferred в jQuery! Объект Deferred — это мощный способ более понятного управления асинхронными операциями.

Он служит заменой будущего результата. К нему можно прикрепить функции, которые выполнятся после завершения операции — независимо от того, завершилась она успешно или с ошибкой, — не блокируя основной код.

Три состояния Deferred

Объект Deferred может находиться в одном из трёх состояний, отражающих состояние представленной им асинхронной задачи:

  • Ожидание: Начальное состояние. Операция ещё не завершена.
  • Успешное завершение: Операция завершилась успешно.
  • Отклонение: Операция завершилась неудачно или столкнулась с ошибкой.

После успешного завершения или отклонения состояние объекта Deferred больше нельзя изменить.

Создание объекта Deferred

Новый объект Deferred создаётся с помощью $.Deferred(). Изначально он находится в состоянии ожидания.

Он предоставляет методы для изменения своего состояния и регистрации функций обратного вызова, которые выполняются при изменении состояния.

Попробуйте создать такой объект:

var myDeferred = $.Deferred();
console.log('Deferred is pending: ' + (myDeferred.state() === 'pending'));

Сигнал об успехе: .resolve()

После успешного завершения асинхронной операции вызовите метод .resolve() у объекта Deferred.

Это изменит его состояние с ожидания на успешное завершение. Все аргументы, переданные в .resolve(), будут переданы функциям обратного вызова для успешного завершения.

Посмотрите, как изменяется состояние:

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.resolve('Data fetched!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

Сигнал об ошибке: .reject()

Если асинхронная операция завершается неудачно, вызовите метод .reject().

Это изменит состояние Deferred с ожидания на отклонение. Аргументы, переданные в .reject(), будут отправлены функциям обратного вызова для обработки ошибки; часто это сообщения об ошибках.

Посмотрите, как работает отклонение:

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.reject('Network error!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

Обработка успеха с помощью .done()

Чтобы отреагировать на успешное завершение операции (когда Deferred находится в состоянии успешного завершения), прикрепите функцию обратного вызова с помощью метода .done().

Эта функция выполнится только при вызове .resolve() и получит все аргументы, переданные в .resolve().

Давайте обработаем некоторые данные:

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = true; // Simulate success
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().done(function(message) {
  console.log('Success handler: ' + message);
});

Обработка ошибки с помощью .fail()

Аналогично, для обработки ошибок (когда Deferred отклонён) используется метод .fail().

Функция обратного вызова, переданная в .fail(), выполнится только при вызове .reject() и получит его аргументы.

Сымитируем ошибку:

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = false; // Simulate failure
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().fail(function(errorMessage) {
  console.log('Error handler: ' + errorMessage);
});

Выполнение в любом случае: .always()

Иногда код должен выполняться независимо от того, завершилась асинхронная операция успешно или с ошибкой. Для этого используется .always().

Функция обратного вызова, прикреплённая с помощью .always(), выполнится как при успешном завершении Deferred, так и при его отклонении.

Используйте .always() для очистки или финального обновления интерфейса:

var fetchData = function(shouldSucceed) {
  var dfd = $.Deferred();
  setTimeout(function() {
    if (shouldSucceed) {
      dfd.resolve('Data received!');
    } else {
      dfd.reject('Request failed!');
    }
  }, 1000);
  return dfd;
};

fetchData(false)
  .done(function(msg) { console.log('Success: ' + msg); })
  .fail(function(err) { console.log('Failure: ' + err); })
  .always(function() { console.log('Operation finished.'); });

Защита с помощью .promise()

Когда функция возвращает объект Deferred, может потребоваться запретить внешнему коду изменять его состояние (например, напрямую вызывать .resolve() или .reject()).

Метод .promise() возвращает версию объекта Deferred, доступную только для чтения. Она предоставляет только методы для подключения функций обратного вызова (например, .done(), .fail(), .always()), но не методы для изменения состояния.

var createAsyncTask = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    dfd.resolve('Task done!');
  }, 500);
  // Return only the promise, not the full Deferred object
  return dfd.promise();
};

var taskPromise = createAsyncTask();
taskPromise.done(function(msg) {
  console.log(msg);
});

// The following would throw an error or do nothing if trying to resolve/reject a promise
// taskPromise.resolve('Attempted to resolve externally'); // This is not possible on a promise object

Проверьте свои знания

Какой из следующих методов следует использовать, чтобы зарегистрировать callback, выполняемый ONLY после успешного завершения асинхронной операции объекта Deferred?

Повторение: основы Deferred

Отличная работа! В этом уроке Вы освоили основные концепции объектов jQuery Deferred:

  • Они управляют асинхронными операциями, помогая избежать ада callback'ов.
  • Они могут находиться в состояниях ожидания, успешного завершения или отклонения.
  • Для успешного завершения используется .resolve(), а для ошибки — .reject().
  • Callback'и подключаются с помощью .done() (успешное завершение), .fail() (ошибка) и .always() (оба случая).
  • .promise() возвращает объект только для чтения, защищая управление состоянием.

Далее Вы узнаете, как объединять эти мощные объекты в цепочки и композиции!

Часто задаваемые вопросы

Урок «Изучение отложенных объектов» бесплатный?

Да — полный текст урока «Изучение отложенных объектов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.

Чему я научусь в уроке «Изучение отложенных объектов»?

Разберитесь в основных понятиях отложенных объектов jQuery, узнайте, как они представляют асинхронные операции, и изучите их состояния: ожидание, выполнено и отклонено. Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.

Сколько времени занимает урок «Изучение отложенных объектов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Изучение отложенных объектов
  2. Цепочки и композиция обещаний
  3. Обработка нескольких асинхронных задач
← Назад к jQuery Academy