Ключевые слова async и await являются основными инструментами для работы с асинхронным кодом в JavaScript. Они позволяют писать код, который легко читать и понимать, даже если в нем присутствуют асинхронные операции.

Ключевое слово async:

Объявление функции как асинхронной происходит путем добавления ключевого слова async перед объявлением функции.
Функция, объявленная с использованием async, всегда возвращает промис.
async функция может содержать операторы await, которые приостанавливают выполнение функции до завершения промиса и возвращают его значение.

Пример объявления асинхронной функции с использованием async:

async function fetchData() {
  // Асинхронные операции
  return result;
}

Ключевое слово await:

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

Пример использования await:

async function fetchData() {
  const result = await someAsyncOperation();
  // Дальнейший код, использующий результат
}

Объединение async и await позволяет писать последовательный асинхронный код, похожий на синхронный. async объявляет функцию асинхронной, а await приостанавливает выполнение функции до завершения асинхронной операции.

Важно помнить, что использование await возможно только внутри функций, объявленных с использованием async. Также следует обрабатывать ошибки при использовании await, чтобы предотвратить их возможное некорректное обработку и прерывание выполнения кода.

Навигация по статье

Сравнение с промисами

Пример кода с использованием промисов:

function fetchData() {
  return someAsyncOperation()
    .then(result => {
      // Обработка результата
      return anotherAsyncOperation(result);
    })
    .then(anotherResult => {
      // Обработка еще одного результата
      return finalAsyncOperation(anotherResult);
    })
    .catch(error => {
      // Обработка ошибок
      console.error(error);
    });
}

В этом примере функция fetchData() использует промисы и методы .then() и .catch() для выполнения асинхронных операций последовательно. Каждый вызов метода .then() ожидает завершения предыдущей асинхронной операции и передает результат следующей операции. Метод .catch() используется для обработки возможных ошибок.

Теперь давайте посмотрим, как этот же код может быть переписан с использованием async/await:

async function fetchData() {
  try {
    const result = await someAsyncOperation();
    // Обработка результата
    const anotherResult = await anotherAsyncOperation(result);
    // Обработка еще одного результата
    const finalResult = await finalAsyncOperation(anotherResult);
    // Дальнейшая обработка результата
    return finalResult;
  } catch (error) {
    // Обработка ошибок
    console.error(error);
  }
}

В этом коде async/await позволяет писать асинхронный код в более линейном стиле, без необходимости использования цепочек .then() и .catch(). Ключевое слово await приостанавливает выполнение функции до завершения промиса и возвращает его результат. Ошибки обрабатываются с помощью блока try/catch, что делает код более структурированным и позволяет легче управлять и обрабатывать ошибки.

Таким образом, код с использованием async/await становится более понятным, читаемым и поддерживаемым, поскольку асинхронные операции могут быть написаны в линейном стиле, без необходимости создания длинных цепочек промисов.

Блок try/catch

Блок try/catch является механизмом обработки ошибок в JavaScript. Он позволяет отлавливать и обрабатывать исключения (ошибки), возникающие в блоке кода, и предоставляет возможность выполнить альтернативное действие при возникновении ошибки.

Блок try/catch имеет следующий синтаксис:

try {
  // Блок кода, в котором могут возникнуть ошибки
} catch (error) {
  // Блок кода, который выполняется при возникновении ошибки
}

Код, который может вызвать ошибку, находится внутри блока try.
Если в блоке try происходит ошибка (возникает исключение), выполнение кода в блоке try прерывается, и управление передается в блок catch.
В блоке catch вы можете определить, как обрабатывать ошибку, используя объект ошибки, который будет передан в параметр error.
После выполнения блока catch выполнение программы продолжается дальше.

Параллельное выполнение операций

Если вам требуется выполнить несколько асинхронных операций параллельно и дождаться их всех, вы можете использовать Promise.all() вместе с async/await. Promise.all() принимает массив промисов и возвращает новый промис, который разрешается, когда все переданные промисы разрешаются.

async function fetchData() {
  const [result1, result2] = await Promise.all([
    someAsyncOperation1(),
    someAsyncOperation2()
  ]);
  // Обработка результатов
}

После выполнения операций, результаты сохраняются в result1 и result2, а затем выполняется обработка результатов.

Вот пример практического использования параллельного выполнения операций с помощью async/await и Promise.all():

async function fetchUserData(userId) {
  // Асинхронный запрос на получение данных пользователя
  const userPromise = fetch(`/api/users/${userId}`).then(response => response.json());

  // Асинхронный запрос на получение данных публикаций пользователя
  const postsPromise = fetch(`/api/posts?userId=${userId}`).then(response => response.json());

  // Параллельное выполнение запросов
  const [userData, postsData] = await Promise.all([userPromise, postsPromise]);

  // Обработка результатов
  console.log("User data:", userData);
  console.log("Posts data:", postsData);
}

Используя Promise.all(), запросы выполняются параллельно и дожидается разрешения обоих промисов. После разрешения промисов userPromise и postsPromise, результаты сохраняются в userData и postsData.

Async/await и циклы

async/await и циклы в JavaScript могут быть использованы вместе для выполнения повторяющихся асинхронных операций. Обычно для этого применяются циклы for или for…of, которые позволяют обойти коллекцию или выполнить итерации определенное количество раз.

Вот пример, демонстрирующий использование async/await с циклом for…of:

async function processItems(items) {
  for (const item of items) {
    try {
      const result = await performAsyncOperation(item);
      console.log(`Processed item ${item}: ${result}`);
    } catch (error) {
      console.error(`Error processing item ${item}: ${error}`);
    }
  }
}

В каждой итерации цикла асинхронная операция performAsyncOperation(item) выполняется с использованием await, чтобы дождаться ее завершения и получить результат. Если операция успешно завершается, результат выводится в консоль.