4.1 Ключове слово async
Асинхронні функції в JavaScript дозволяють писати асинхронний код, який виглядає і читається як синхронний. Ключові слова async і await, введені в ECMAScript 2017 (ES8), полегшують роботу з промісами і роблять код більш зрозумілим та керованим.
Основні концепції
Ключове слово async перед оголошенням функції вказує, що функція є асинхронною. Асинхронна функція завжди повертає проміс, навіть якщо в ній явно не вказано оператор return. Якщо функція повертає значення, воно автоматично обгортається в проміс з цим значенням.
Синтаксис:
async function ім’я() {
// код функції
}
Приклад:
async function greet() {
return 'Привіт, світе!';
}
greet().then((message) => {
console.log(message); // Виведе: Привіт, світе!
});
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 'Привіт, світе!';
}
async function displayGreeting() {
const message = await greet();
console.log(message); // Виведе: Привіт, світе! через 2 секунди
}
displayGreeting();
4.3 Приклади використання async і await
Приклад 1: Асинхронна функція з очікуванням кількох промісів
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Дані 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Дані 2'), 2000));
}
async function fetchAllData() {
const data1 = await fetchData1();
console.log(data1); // Виведе: Дані 1 через 1 секунду
const data2 = await fetchData2();
console.log(data2); // Виведе: Дані 2 через 2 секунди
}
fetchAllData();
Приклад 2: Паралельне виконання асинхронних операцій
Щоб виконати кілька асинхронних операцій паралельно, можна використати Promise.all() з await.
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Дані 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Дані 2'), 2000));
}
async function fetchAllData() {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1); // Виведе: Дані 1 через 2 секунди
console.log(data2); // Виведе: Дані 2 через 2 секунди
}
fetchAllData();
Приклад 3: Обробка помилок з використанням try...catch
Асинхронні функції дозволяють використовувати блоки try...catch для обробки помилок, що робить код більш читабельним і керованим.
function fetchDataWithError() {
return new Promise((resolve, reject) => setTimeout(() => reject('Помилка сталася'), 1000));
}
async function fetchData() {
try {
const data = await fetchDataWithError();
console.log(data);
} catch (error) {
console.error('Помилка:', error); // Виведе: Помилка: Помилка сталася через 1 секунду
}
}
fetchData();
Приклад 4: Використання async і await у методах класу
Асинхронні функції можна використовувати і в методах класів.
class DataFetcher {
async fetchData() {
const data = await new Promise((resolve) => setTimeout(() => resolve('Отримані дані'), 1000));
return data;
}
}
const fetcher = new DataFetcher();
fetcher.fetchData().then((data) => {
console.log(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();
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ