Что такое async/await и как они упрощают асинхронный код?
async и await — это синтаксические особенности, введённые в ECMAScript 2017 (ES8), которые делают работу с асинхронным кодом в JavaScript намного проще и читаемее. Они построены на основе Promises и позволяют писать асинхронный код, который выглядит как синхронный, снижая сложность и улучшая читаемость.
1. async function
async — это ключевое слово, которое используется для создания асинхронной функции. Функция, помеченная как async, всегда возвращает Promise. Если функция возвращает значение, это значение автоматически оборачивается в решённый Promise. Если функция выбрасывает ошибку, то возвращается отклонённый Promise.
Синтаксис:
async function myFunction() {
// тело функции
}
Пример:
async function fetchData() {
return "Данные загружены!";
}
fetchData().then(result => console.log(result)); // "Данные загружены!"
В этом примере, хотя функция возвращает строку, она фактически возвращает Promise с этим значением, благодаря использованию async.
2. await
await используется внутри асинхронных функций и заставляет выполнение кода "подождать" до тех пор, пока Promise не будет выполнен или отклонён. Он делает асинхронный код более похожим на синхронный, избегая необходимости использовать цепочки then() и улучшая читаемость.
Синтаксис:
let result = await somePromise;
Когда код встречает await, он ждёт выполнения Promise и только потом продолжает выполнение функции. Это позволяет писать код, который выглядит как обычный последовательный код, но при этом работает асинхронно.
Пример:
async function fetchData() {
let result = await fetch('https://api.example.com/data');
let data = await result.json();
return data;
}
fetchData().then(data => console.log(data));
Здесь await ждёт, пока не будет выполнен fetch, а затем обрабатывает полученные данные. Это упрощает код, так как мы избегаем вложенности then(), что часто делает код громоздким и трудным для понимания.
Как async/await упрощают асинхронный код?
async/await, выглядит и читается как синхронный код, что делает его проще для восприятия и отладки.then(): До появления async/await код с множеством асинхронных операций часто был сложным из-за вложенных коллбеков или длинных цепочек then(). С async/await все эти операции можно записывать последовательно, что улучшает структуру кода.catch() для обработки ошибок в цепочке Promises, с async/await можно использовать стандартный try/catch, что делает обработку ошибок более естественной и знакомой для разработчиков.Пример с обработкой ошибок:
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Ошибка при загрузке данных');
}
let data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}
fetchData();
В этом примере ошибки, возникающие при загрузке данных, обрабатываются с помощью стандартного механизма try/catch, что делает код чище и понятнее.
Заключение
async и await делают асинхронный код в JavaScript гораздо более удобным и читаемым. Они позволяют писать асинхронные операции, которые выглядят как обычный синхронный код, а также упрощают обработку ошибок. Это помогает разработчикам сосредоточиться на логике приложения, а не на сложных механизмах работы с асинхронностью.