Async/await в JavaScript

В этой статье мы объясним, как работают async/await в JavaScript.

YouTube Video

Async/await в JavaScript

async (и await) в JavaScript — это функции, предназначенные для упрощения написания асинхронных операций и повышения читаемости кода. Используя это, вы можете уменьшить сложность традиционных обратных вызовов и цепочек Promise, а также писать асинхронный код так, как будто он синхронный.

Функция async

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

Базовый синтаксис функции async

1async function myAsyncFunction() {
2    // Write asynchronous processing here
3    return 'Result';  // Return a Promise
4}

В этом случае вызов myAsyncFunction() автоматически возвращает объект Promise. Когда Promise выполняется, его результат становится значением, возвращаемым через return.

Пример: Базовая функция async

1async function greet() {
2    return 'Hello, World!';
3}
4
5greet().then((message) => {
6    console.log(message);  // Displays "Hello, World!"
7});

await

await используется для ожидания выполнения Promise. Используя await, вы можете приостановить выполнение до выполнения Promise и получить его результат. await может использоваться только внутри функции async.

Пример: Как использовать await

 1async function fetchData() {
 2    // Wait for the result of the Promise
 3    const data = await fetch('https://codesparklab.com/json/example.json');
 4    // Wait for the asynchronous operation to complete
 5    const jsonData = await data.json();
 6    // Retrieve and display the data
 7    console.log(jsonData);
 8}
 9
10fetchData();

В приведённом выше примере используется await для ожидания возвращения Promise функцией fetch, а затем выполняются дальнейшие асинхронные операции, используя результат.

Обработка ошибок с использованием async/await

Если ошибка возникает внутри функции async, эта ошибка рассматривается как reject Promise. Вы можете использовать конструкцию try...catch для обработки ошибок.

Пример: Обработка ошибок

 1async function fetchData() {
 2    try {
 3        // Invalid URL
 4        const data = await fetch('https://api.invalid-url.com/data');
 5        const jsonData = await data.json();
 6        console.log(jsonData);
 7    } catch (error) {
 8        // Catch the error
 9        console.error('Failed to fetch data:', error);
10    }
11}
12
13fetchData();

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

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

По сравнению с традиционными цепочками Promise, async/await предоставляет следующие преимущества:.

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

Пример: цепочка Promise против async/await

Давайте сравним код с использованием цепочек Promise и код с использованием async/await.

 1// Code using Promise chains
 2function fetchDataPromise() {
 3    fetch('https://codesparklab.com/json/example.json')
 4        .then((response) => response.json())
 5        .then((data) => {
 6            console.log(data);
 7        })
 8    .catch((error) => {
 9        console.error('Failed to fetch data:', error);
10    });
11}
12
13// Code using async/await
14async function fetchDataAsync() {
15    try {
16        const response = await fetch('https://codesparklab.com/json/example.json');
17        const data = await response.json();
18        console.log(data);
19    } catch (error) {
20        console.error('Failed to fetch data:', error);
21    }
22}

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

Выполнение нескольких асинхронных операций одновременно

Объединив Promise.all() или Promise.race() с await, можно выполнять несколько асинхронных операций одновременно и обрабатывать их результаты коллективно.

Пример: Выполнение нескольких асинхронных операций одновременно

 1async function fetchMultipleData() {
 2    try {
 3        const [data1, data2] = await Promise.all([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData1 = await data1.json();
 8        const jsonData2 = await data2.json();
 9        console.log(jsonData1, jsonData2);
10    } catch (error) {
11        console.error('Failed to fetch data:', error);
12    }
13}
14
15fetchMultipleData();

Promise.all() выполняет несколько Promises одновременно и возвращает их результаты в виде массива. Он ожидает завершения всех Promises, и если хоть один из них проваливается, это считается общей ошибкой.

Резюме

• Функция async: Всегда возвращает Promise и используется для написания асинхронного кода.
• await: Используется для ожидания завершения Promise и получения его результата.
• Обработка ошибок: Используйте try...catch для обработки ошибок, возникающих в асинхронных операциях.
• Несколько асинхронных операций: Вы можете выполнять несколько асинхронных операций одновременно, используя Promise.all().

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

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video