Асинхронный JavaScript с async / await

Асинхронный JavaScript с использованием async и await открывает путь к написанию более чистого, понятного и поддерживаемого асинхронного кода. В этом материале вы узнаете, как осваивать современные подходы к работе с обещаниями (Promises) и создавать код, который читается так же просто, как синхронный.

Что такое async / await

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

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

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

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

Оператор await приостанавливает выполнение асинхронной функции до тех пор, пока переданный ему Promise не будет выполнен. Это позволяет писать асинхронный код в стиле синхронного, избегая глубокой вложенности и запутанных цепочек then().

Преимущества использования async / await

• Улучшенная читаемость кода и логики выполнения.
• Минимизация вложенности обратных вызовов.
• Проще обрабатывать ошибки с помощью try/catch.
• Облегчение отладки и сопровождения.

Преобразование HTTP-запроса в async-функцию

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

Базовый пример

Рассмотрим, как можно переписать функцию, использующую Promise, на async / await:

// Пример с использованием Promise
function fetchData() {
  return fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
}

// Тот же пример с async / await
async function fetchDataAsync() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Заключение

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