frontend-docs/docs/javascript/08-promises/02-promises.md

sidebar_position

sidebar_position
2

Promises

Использование Promises (обещаний) в JavaScript — это более современный и удобный способ работы с асинхронными операциями по сравнению с callback-функциями. Promises позволяют избежать "callback hell" и делают код более читаемым и структурированным.

Вот пример асинхронного программирования с использованием Promises:

// Пример асинхронной функции, которая возвращает Promise
function fetchData() {
    return new Promise((resolve, reject) => {
        // Имитируем задержку с помощью setTimeout
        setTimeout(() => {
            const success = true; // Имитируем успешное выполнение или ошибку
            if (success) {
                const data = { name: "Alice", age: 25 };
                resolve(data); // Успешное выполнение
            } else {
                reject("Ошибка: Данные не получены"); // Ошибка
            }
        }, 2000); // Задержка 2 секунды
    });
}

// Использование Promise
fetchData()
    .then((data) => {
        console.log("Данные получены:", data);
    })
    .catch((error) => {
        console.error(error);
    })
    .finally(() => {
        console.log("Запрос завершен.");
    });

console.log("Ожидание данных...");

Объяснение:

1. fetchData — это функция, которая возвращает Promise. Внутри Promise выполняется асинхронная операция (в данном случае, с задержкой в 2 секунды).
2. resolve — вызывается, если операция завершилась успешно. В этом случае Promise переходит в состояние "fulfilled" (выполнено), и данные передаются в метод .then().
3. reject — вызывается, если произошла ошибка. В этом случае Promise переходит в состояние "rejected" (отклонено), и ошибка передается в метод .catch().
4. .then() — обрабатывает успешный результат.
5. .catch() — обрабатывает ошибки.
6. .finally() — выполняется в любом случае, независимо от того, завершился Promise успешно или с ошибкой.

Вывод в консоль:

Ожидание данных...
Данные получены: { name: "Alice", age: 25 }
Запрос завершен.

Если произойдет ошибка:

Если переменная success будет равна false, то вывод будет таким:

Ожидание данных...
Ошибка: Данные не получены
Запрос завершен.

Преимущества Promises:

• Более читаемый и структурированный код.
• Легко комбинировать несколько асинхронных операций с помощью .then().
• Удобная обработка ошибок через .catch().

Пример с цепочкой Promises:

fetchData()
    .then((data) => {
        console.log("Данные получены:", data);
        return data.age; // Возвращаем только возраст
    })
    .then((age) => {
        console.log("Возраст пользователя:", age);
    })
    .catch((error) => {
        console.error(error);
    });

Этот пример показывает, как можно последовательно обрабатывать данные с помощью цепочки .then().

💥 Thenable

Если быть более точными, обработчик может возвращать не именно промис, а любой объект, содержащий метод .then, такие объекты называют «thenable», и этот объект будет обработан как промис.

🚀 Источник Deepseek