Проміси та async/await
Зрозумій асинхронне програмування через прості аналогії
Проміс = замовлення піци
Ти замовив піцу. Тобі дали квиток (проміс) і сказали 'почекай'. Ти не стоїш біля каси — займаєшся своїми справами. Коли піца готова — тебе кличуть. Проміс в коді працює так само: запускаєш задачу, займаєшся іншим, отримуєш результат коли готово.
Синхронний vs асинхронний код
Синхронний — кожна операція чекає поки попередня завершиться:
console.log('1');
console.log('2'); // виконається після 1
console.log('3'); // виконається після 2
// Вивід: 1, 2, 3Асинхронний — не блокує виконання, результат приходить пізніше:
console.log('1');
setTimeout(() => console.log('2'), 1000); // через 1 секунду
console.log('3'); // виконується одразу, не чекає setTimeout
// Вивід: 1, 3, 2Чому це важливо? Мережеві запити (fetch) займають час — 100мс, 1с, 5с. Якби fetch був синхронним — браузер заморозив би вкладку до отримання відповіді!
Promise може бути в трьох станах: pending (очікує), fulfilled (виконано), rejected (відхилено). .then() реагує на fulfilled, .catch() — на rejected.
async/await — зручний синтаксис для Promise
async/await — це не нова концепція, це просто зручніший запис для роботи з Promise:
// Той самий код але читабельніше:
async function fetchData() {
try {
const result = await someAsyncOperation(); // чекаємо результату
console.log(result);
} catch (error) {
console.log('Помилка:', error);
}
}Правила:
awaitможна використовувати ТІЛЬКИ всерединіasyncфункціїasyncфункція завжди повертає Promise (навіть якщо return звичайне значення)awaitзупиняє виконання ТІЛЬКИ всередині async функції, не блокує браузер
Обидва варіанти роблять те саме. async/await читається як звичайний код — зверху вниз. Рядок 'Виконується ОДРАЗУ' виведеться першим!
await перед функцією що не повертає Promise просто повертає значення одразу — помилки не буде. Але це марнотратно і заплутує читача. Використовуй await тільки з async функціями або функціями що повертають Promise.