Курс по программированию на JavaScript

Урок 18: Async/Await

Async/await — это синтаксический сахар в JavaScript для работы с промисами. Он делает асинхронный код более понятным и легким для чтения. В этом уроке мы рассмотрим основы синтаксиса async/await и приведем примеры использования.

Понимание синтаксиса async/await

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

// Пример асинхронной функции с использованием async/await
async function fetchData() {
 let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
 let data = await response.json();
 console.log(data);
}

fetchData();

{userId: 1, id: 1, title: "Sample Title", body: "Sample Body"}

В этом примере функция fetchData является асинхронной. Внутри функции мы используем await для ожидания выполнения промиса, возвращаемого функцией fetch. После завершения промиса мы получаем данные и выводим их в консоль.

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

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

Пример 1: Обработка ошибок с использованием try/catch

Async/await позволяет легко обрабатывать ошибки асинхронных операций с помощью блока try/catch.

// Пример обработки ошибок с использованием try/catch
async function fetchData() {
 try {
 let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
 if (!response.ok) {
 throw new Error('Network response was not ok');
 }
 let data = await response.json();
 console.log(data);
 } catch (error) {
 console.error('Fetch error:', error);
 }
}

fetchData();

{userId: 1, id: 1, title: "Sample Title", body: "Sample Body"}

В этом примере мы используем блок try/catch для обработки ошибок, которые могут возникнуть при выполнении асинхронных операций. Если происходит ошибка, она выводится в консоль.

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

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

// Пример последовательного выполнения асинхронных операций
async function fetchMultipleData() {
 let response1 = await fetch('https://jsonplaceholder.typicode.com/posts/1');
 let data1 = await response1.json();
 console.log(data1);

 let response2 = await fetch('https://jsonplaceholder.typicode.com/posts/2');
 let data2 = await response2.json();
 console.log(data2);
}

fetchMultipleData();

{userId: 1, id: 1, title: "Sample Title 1", body: "Sample Body 1"}
{userId: 1, id: 2, title: "Sample Title 2", body: "Sample Body 2"}

В этом примере мы последовательно выполняем два асинхронных запроса и выводим их результаты в консоль. Асинхронные операции выполняются последовательно благодаря использованию await.

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

Для параллельного выполнения асинхронных операций можно использовать Promise.all вместе с async/await.

// Пример параллельного выполнения асинхронных операций
async function fetchParallelData() {
 let [response1, response2] = await Promise.all([
 fetch('https://jsonplaceholder.typicode.com/posts/1'),
 fetch('https://jsonplaceholder.typicode.com/posts/2')
 ]);

 let data1 = await response1.json();
 let data2 = await response2.json();

 console.log(data1);
 console.log(data2);
}

fetchParallelData();

{userId: 1, id: 1, title: "Sample Title 1", body: "Sample Body 1"}
{userId: 1, id: 2, title: "Sample Title 2", body: "Sample Body 2"}

В этом примере мы используем Promise.all для параллельного выполнения двух асинхронных запросов. Результаты обоих запросов обрабатываются после завершения всех промисов.

Упражнения

// Определение функции getData
async function getData() {
 try {
 let response = await fetch('https://jsonplaceholder.typicode.com/users/1');
 if (!response.ok) {
 throw new Error('Network response was not ok');
 }
 let user = await response.json();
 console.log(user.name);
 } catch (error) {
 console.error('Fetch error:', error);
 }
}

getData();

Leanne Graham

// Определение функции loadMultipleData
async function loadMultipleData() {
 try {
 let [response1, response2] = await Promise.all([
 fetch('https://jsonplaceholder.typicode.com/posts/1'),
 fetch('https://jsonplaceholder.typicode.com/posts/2')
 ]);

 let data1 = await response1.json();
 let data2 = await response2.json();

 console.log(data1);
 console.log(data2);
 } catch (error) {
 console.error('Fetch error:', error);
 }
}

loadMultipleData();

{userId: 1, id: 1, title: "Sample Title 1", body: "Sample Body 1"}
{userId: 1, id: 2, title: "Sample Title 2", body: "Sample Body 2"}