Последовательное отправление запросов через Promise

1️⃣ Как кратко ответить

Для последовательного отправления запросов через Promise используйте метод then для цепочки промисов. Каждый последующий запрос выполняется в then предыдущего, что гарантирует их выполнение в строгом порядке.

2️⃣ Подробное объяснение темы

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

Зачем это нужно

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

Как это работает

Промисы в JavaScript позволяют работать с асинхронными операциями более управляемо. Метод then используется для обработки успешного выполнения промиса и может возвращать новый промис, что позволяет создавать цепочки промисов.

Пример кода

Рассмотрим пример, где мы последовательно отправляем два HTTP-запроса с использованием fetch, который возвращает промис.

// Функция для выполнения первого запроса
function fetchData1() {
  return fetch('https://api.example.com/data1')
    .then(response => response.json()); // Преобразуем ответ в JSON
}
​
// Функция для выполнения второго запроса
function fetchData2(dataFromFirstRequest) {
  return fetch(`https://api.example.com/data2?param=${dataFromFirstRequest.id}`)
    .then(response => response.json()); // Преобразуем ответ в JSON
}
​
// Последовательное выполнение запросов
fetchData1()
  .then(data1 => {
    // data1 - результат первого запроса
    console.log('First request data:', data1);
    return fetchData2(data1); // Возвращаем промис второго запроса
  })
  .then(data2 => {
    // data2 - результат второго запроса
    console.log('Second request data:', data2);
  })
  .catch(error => {
    // Обработка ошибок
    console.error('Error:', error);
  });

Пояснение кода

1. fetchData1: Функция отправляет первый запрос. fetch возвращает промис, который разрешается с объектом Response. Мы используем then для преобразования ответа в JSON.

2. fetchData2: Функция отправляет второй запрос, используя данные из первого запроса. Параметр dataFromFirstRequest содержит результат первого запроса, который мы используем для формирования URL второго запроса.

3. Цепочка промисов:

   • fetchData1() инициирует первый запрос.
   • В then мы получаем data1, результат первого запроса, и передаем его в fetchData2.
   • fetchData2(data1) возвращает промис второго запроса.
   • Следующий then обрабатывает результат второго запроса.
   • catch обрабатывает любые ошибки, возникшие в процессе выполнения запросов.

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