Колбек (функція зворотного виклику) - функція, яку передають іншій функції, щоб та викликала її пізніше:
button.addEventListener('click', () => console.log('клік'));
[1, 2, 3].map((n) => n * 2); // теж колбек, але синхронний
До появи Promise асинхронний код писали лише колбеками: «зроби запит і, коли буде відповідь, виклич цю функцію».
Пекло колбеків з'являється, коли кроки залежать один від одного:
getUser(id, (error, user) => {
if (error) return showError(error);
getOrders(user.id, (error, orders) => {
if (error) return showError(error);
getInvoice(orders[0].id, (error, invoice) => {
if (error) return showError(error);
render(invoice);
});
});
});
Проблеми:
- код росте вправо і погано читається;
- помилку треба перевіряти на кожному рівні окремо - легко пропустити;
- немає простого способу запустити кілька операцій паралельно й дочекатися всіх;
- функція може викликати колбек двічі чи жодного разу - і нічого вас від цього не захистить.
Те саме з Promise і async/await:
try {
const user = await getUser(id);
const orders = await getOrders(user.id);
render(await getInvoice(orders[0].id));
} catch (error) {
showError(error);
}
Код читається зверху вниз, одна обробка помилок на всі кроки, а Promise гарантовано виконується чи відхиляється рівно один раз.
Колбеки нікуди не зникли: обробники подій, методи масивів, setTimeout - це колбеки, і для них вони доречні. Від колбеків відмовилися саме для одноразових асинхронних результатів.