4.1 Ключевое слово async
Асинхронные функции в JavaScript позволяют писать асинхронный код, который выглядит и читается как синхронный. Ключевые слова async и await, введенные в ECMAScript 2017 (ES8), облегчают работу с промисами и делают код более понятным и управляемым.
Основные концепции
Ключевое слово async перед объявлением функции указывает, что функция является асинхронной. Асинхронная функция всегда возвращает промис, даже если в ней явно не указан оператор return. Если функция возвращает значение, оно автоматически оборачивается в промис с этим значением.
Синтаксис:
async function имя() {
// код функции
}
Пример:
async function greet() {
return 'Hello, world!';
}
greet().then((message) => {
console.log(message); // Выведет: Hello, world!
});
4.2 Ключевое слово await
Ключевое слово await используется внутри асинхронной функции для приостановки ее выполнения до тех пор, пока промис не выполнится. await можно использовать только внутри функций, объявленных с ключевым словом async.
Синтаксис:
let result = await
promise;
Пример:
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function greet() {
await delay(2000);
return 'Hello, world!';
}
async function displayGreeting() {
const message = await greet();
console.log(message); // Выведет: Hello, world! через 2 секунды
}
displayGreeting();
4.3 Примеры использования async и await
Пример 1: Асинхронная функция с ожиданием нескольких промисов
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const data1 = await fetchData1();
console.log(data1); // Выведет: Data 1 через 1 секунду
const data2 = await fetchData2();
console.log(data2); // Выведет: Data 2 через 2 секунды
}
fetchAllData();
Пример 2: Параллельное выполнение асинхронных операций
Чтобы выполнить несколько асинхронных операций параллельно, можно использовать Promise.all() с await.
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1); // Выведет: Data 1 через 2 секунды
console.log(data2); // Выведет: Data 2 через 2 секунды
}
fetchAllData();
Пример 3: Обработка ошибок с использованием try...catch
Асинхронные функции позволяют использовать блоки try...catch для обработки ошибок, что делает код более читаемым и управляемым.
function fetchDataWithError() {
return new Promise((resolve, reject) => setTimeout(() => reject('Error occurred'), 1000));
}
async function fetchData() {
try {
const data = await fetchDataWithError();
console.log(data);
} catch (error) {
console.error('Error:', error); // Выведет: Error: Error occurred через 1 секунду
}
}
fetchData();
Пример 4: Использование async и await в методах класса
Асинхронные функции можно использовать и в методах классов.
class DataFetcher {
async fetchData() {
const data = await new Promise((resolve) => setTimeout(() => resolve('Fetched Data'), 1000));
return data;
}
}
const fetcher = new DataFetcher();
fetcher.fetchData().then((data) => {
console.log(data); // Выведет: Fetched Data через 1 секунду
});
Пример 5: Асинхронные итераторы
Асинхронные итераторы позволяют работать с потоками данных, поступающих асинхронно.
async function* asyncGenerator() {
let i = 0;
while (i < 3) {
await new Promise((resolve) => setTimeout(resolve, 1000));
yield i++;
}
}
async function iterateAsyncGenerator() {
for await (let value of asyncGenerator()) {
console.log(value); // Выведет 0, 1 и 2 с интервалом в 1 секунду
}
}
iterateAsyncGenerator();
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ