jQuery Academy · Урок

Цепочки и композиция обещаний

Урок 2 из 311 шагов

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

Выстраивание асинхронных операций

В веб-разработке часто требуется выполнять асинхронные задачи (например, получать данные) в определённом порядке. Объединение обещаний в цепочку позволяет делать это аккуратно.

Вместо вложенных callback'ов, которые могут привести к «аду callback'ов», можно связать операции последовательно, чтобы код было гораздо легче читать и поддерживать.

Создание цепочек с помощью .then()

Метод .then() — основа создания цепочек. Когда Deferred (или Promise) переходит в состояние успешного завершения, выполняется его callback .then(). Возвращаемое этим callback значение можно затем использовать в следующем .then() цепочки.

Если callback возвращает новый Deferred, цепочка ожидает успешного завершения этого нового Deferred, прежде чем продолжить выполнение.

Простой пример цепочки .then()

Рассмотрим простой пример с имитацией двух асинхронных шагов. Второй шаг выполняется только после завершения первого и использует данные, полученные на первом шаге.

Обратите внимание, как результат step1 ('Data from Step 1') передаётся в step2.

function runChainExample() {
  let dfd1 = new $.Deferred();
  let dfd2 = new $.Deferred();

  setTimeout(() => {
    console.log("Step 1 complete!");
    dfd1.resolve("Data from Step 1");
  }, 500);

  dfd1.then(function(data1) {
    console.log("Received in Step 2: " + data1);
    setTimeout(() => {
      console.log("Step 2 complete!");
      dfd2.resolve("Processed " + data1);
    }, 300);
    return dfd2;
  }).then(function(data2) {
    console.log("Received in Final Step: " + data2);
    console.log("Chain finished!");
  });
}

$(document).ready(function() {
  runChainExample();
});

Передача данных в цепочках .then()

Значение, возвращаемое callback'ом .then(), определяет входные данные для следующего .then().

Если вернуть значение, не являющееся Deferred, оно становится успешно возвращённым значением для следующего .then().
Если вернуть объект Deferred, цепочка приостанавливается до успешного завершения этого Deferred, а его успешно возвращённое значение передаётся следующему .then().

Преобразование с помощью .pipe()

Хотя .then() является современным стандартом, .Deferred() в jQuery также предлагает .pipe(). Этот метод похож на .then(), но изначально предназначался для преобразования успешно возвращённого или отклонённого значения либо для выбора Deferred, который продолжит цепочку.

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

Пример преобразования с помощью .pipe()

Здесь мы используем .pipe(), чтобы получить результат первой операции, преобразовать его (например, перевести в верхний регистр), а затем передать преобразованное значение конечному обработчику .done().

function runPipeExample() {
  let dfd = new $.Deferred();

  setTimeout(() => {
    console.log("Initial data ready.");
    dfd.resolve("hello world");
  }, 500);

  dfd.pipe(function(originalData) {
    console.log("Piping: Transforming data...");
    return originalData.toUpperCase(); // Transforms the value
  }).done(function(transformedData) {
    console.log("Final result: " + transformedData);
  });
}

$(document).ready(function() {
  runPipeExample();
});

Композиция с помощью $.when()

Что делать, если у Вас есть несколько независимых асинхронных задач, но продолжать выполнение можно только после завершения всех? Здесь пригодится $.when().

$.when() принимает один или несколько объектов Deferred (или Promise) в качестве аргументов и возвращает новый Deferred. Этот новый Deferred завершается успешно только после успешного завершения всех входных Deferred.

Пример параллельных задач с $.when()

В этом примере мы имитируем два независимых AJAX-запроса (fetchUser и fetchPosts). Мы используем $.when(), чтобы дождаться завершения обоих запросов перед выводом объединённых результатов в журнал.

Обратите внимание: они выполняются параллельно, а не последовательно.

function runWhenExample() {
  function fetchUser() {
    let dfd = new $.Deferred();
    setTimeout(() => {
      console.log("User data fetched.");
      dfd.resolve({ id: 1, name: "Alice" });
    }, 800);
    return dfd.promise();
  }

  function fetchPosts() {
    let dfd = new $.Deferred();
    setTimeout(() => {
      console.log("Posts data fetched.");
      dfd.resolve([{ id: 101, title: "Post 1" }, { id: 102, title: "Post 2" }]);
    }, 500);
    return dfd.promise();
  }

  $.when(fetchUser(), fetchPosts())
    .done(function(userData, postsData) {
      console.log("All data loaded!");
      console.log("User: ", userData);
      console.log("Posts: ", postsData);
    })
    .fail(function() {
      console.log("One or more tasks failed.");
    });
}

$(document).ready(function() {
  runWhenExample();
});

Доступ к результатам $.when()

Когда Deferred, возвращённый $.when(), завершается успешно, его callback'и .done() или .then() получают успешно возвращённые значения каждого входного Deferred в виде отдельных аргументов и в том порядке, в котором они были переданы в $.when().

Это упрощает объединение и обработку данных из нескольких источников, когда все они становятся доступными.

Тест по цепочкам обещаний

Рассмотрите следующий фрагмент кода jQuery:

let dfd1 = new $.Deferred();
let dfd2 = new $.Deferred();

dfd1.then(function(val) {
  return val + " World";
}).then(function(newVal) {
  console.log(newVal); // Line A
  return dfd2;
}).then(function() {
  console.log("Finished!"); // Line B
});

dfd1.resolve("Hello");
dfd2.resolve();

Каков будет FINAL вывод в консоли и в каком порядке он появится?

Ответь в интерактивном уроке

Повторение: создание цепочек и композиция

Мы научились управлять сложными асинхронными процессами:

Создание цепочек с помощью .then(): операции выполняются последовательно, а результаты передаются с одного этапа на следующий.
.pipe(): устаревший метод для преобразования значений или отображения Deferred в цепочке.
Композиция с помощью $.when(): ожидает завершения нескольких независимых Deferred, выполняющихся параллельно, прежде чем продолжить работу, и передаёт их результаты в виде отдельных аргументов.

Эти шаблоны особенно важны для создания надёжных и понятных асинхронных приложений.

Можно начать бесплатно

Изучай JavaScript с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 22
Уроки: 48

Начать учиться бесплатно Посмотреть полный курс

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

Урок «Цепочки и композиция обещаний» бесплатный?

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

Чему я научусь в уроке «Цепочки и композиция обещаний»?

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

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

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

Сколько времени занимает урок «Цепочки и композиция обещаний»?

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

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

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

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

← Назад к jQuery Academy