Callback-функцій.

Це найпростіший підхід, але він може призвести до заплутаного коду, особливо коли одна асинхронна операція запускає іншу, і так утворюється ланцюг.
Уявімо, що маємо функцію downloadImage(url, callback), яка завантажує зображення асинхронно, не блокуючи основний потік. Перший параметр - це адреса зображення, яке потрібно завантажити, а другий - функція, яку буде викликано після завершення завантаження. При цьому саме зображення буде передане як параметр у callback.

Приклад використання:

downloadImage(url1, image => document.body.append(image))

На перший погляд усе просто. Але якщо потрібно завантажити кілька зображень послідовно, код стає менш зрозумілим:

downloadImage(url1, image => {
document.body.append(image);
downloadImage(url2, image => {
document.body.append(image);
downloadImage(url3, image => {
document.body.append(image);
})
})
});

Така вкладена структура швидко ускладнюється, особливо якщо замість одного рядка з DOM-змінами з’являється додаткова логіка. Подібний стиль називають "Pyramid of Doom", і його краще уникати.
Один зі способів спростити обробку асинхронних викликів - це використання Promise.