Promises and async/await
Understand asynchronous programming through simple analogies
Promise = pizza order
You ordered pizza. They gave you a ticket (promise) and said 'wait'. You don't stand at the counter — you go about your business. When the pizza is ready — they call you. A promise in code works the same way: you start a task, do other things, and get the result when it's ready.
Синхронний 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.