Асинхронний JavaScript: Promises, async/await та коли що використовувати

JavaScript, Веб-розробка · 15-2-2025

Асинхронний код у JavaScript може викликати головний біль, особливо якщо ти тільки починаєш працювати з ним. Сучасні браузери та серверні середовища, такі як Node.js, активно використовують асинхронність, щоб не блокувати виконання коду під час очікування на відповідь від сервера, читання файлу чи виконання запиту до бази даних.

Callbacks та їх проблеми

Раніше асинхронність у JavaScript реалізовувалась через колбеки (callback functions). Це функції, які передаються як аргументи і викликаються після завершення асинхронної операції.

function fetchData(callback) {
    setTimeout(() => {
        callback("Дані отримані!");
    }, 1000);
}

fetchData((message) => {
    console.log(message);
});

Такий підхід працює, але при ускладненні логіки він може перетворитися на так званий “callback hell”:

function step1(callback) {
    setTimeout(() => {
        console.log("Крок 1");
        callback();
    }, 1000);
}

function step2(callback) {
    setTimeout(() => {
        console.log("Крок 2");
        callback();
    }, 1000);
}

function step3(callback) {
    setTimeout(() => {
        console.log("Крок 3");
        callback();
    }, 1000);
}

step1(() => {
    step2(() => {
        step3(() => {
            console.log("Завершено!");
        });
    });
});

Цей код складно читати, підтримувати і розширювати. Тому було введено Promise.

Promises: новий рівень асинхронності

Об’єкт Promise дозволяє працювати з асинхронними операціями в більш структурованому вигляді.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Дані отримані!");
        }, 1000);
    });
}

fetchData().then((message) => {
    console.log(message);
});