Урок 17: Промисы
Промисы являются мощным инструментом для управления асинхронными операциями в JavaScript. Они предоставляют способ обработки успешного выполнения или ошибки асинхронных операций. В этом уроке мы рассмотрим, что такое промисы и как с ними работать.
Введение в промисы
Промис — это объект, представляющий результат асинхронной операции. Промис может находиться в одном из трех состояний:
- Ожидание (pending): начальное состояние, операция еще не завершена.
- Исполнено (fulfilled): операция успешно завершена.
- Отклонено (rejected): операция завершена с ошибкой.
Создать промис можно с помощью конструктора Promise, который принимает функцию с двумя аргументами: resolve и reject.
// Пример создания промиса
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve('Операция выполнена успешно');
} else {
reject('Произошла ошибка');
}
});
console.log(promise); // Promise { : "fulfilled", : "Операция выполнена успешно" }
Promise { : "fulfilled", : "Операция выполнена успешно" }
Работа с промисами
Для обработки успешного выполнения или ошибки промиса используются методы then, catch и finally.
Метод then
Метод then позволяет задать функции, которые будут выполнены при успешном завершении промиса.
// Пример использования then
promise.then((result) => {
console.log(result); // Операция выполнена успешно
});
Операция выполнена успешно
Метод catch
Метод catch позволяет задать функцию, которая будет выполнена при ошибке в промисе.
// Пример использования catch
let promiseWithError = new Promise((resolve, reject) => {
reject('Произошла ошибка');
});
promiseWithError.catch((error) => {
console.log(error); // Произошла ошибка
});
Метод finally
Метод finally позволяет задать функцию, которая будет выполнена в любом случае после завершения промиса, независимо от его результата.
// Пример использования finally
promise.finally(() => {
console.log('Промис завершен'); // Промис завершен
});
Цепочка промисов
Методы then, catch и finally могут быть объединены в цепочки для обработки последовательности асинхронных операций.
// Пример цепочки промисов
new Promise((resolve, reject) => {
setTimeout(() => resolve('Шаг 1 выполнен'), 1000);
}).then((result) => {
console.log(result); // Шаг 1 выполнен
return new Promise((resolve, reject) => {
setTimeout(() => resolve('Шаг 2 выполнен'), 1000);
});
}).then((result) => {
console.log(result); // Шаг 2 выполнен
}).catch((error) => {
console.log(error);
}).finally(() => {
console.log('Цепочка промисов завершена'); // Цепочка промисов завершена
});
Шаг 1 выполнен
Шаг 2 выполнен
Цепочка промисов завершена
Упражнения
Упражнение 1: Асинхронная загрузка данных
Создайте функцию loadData, которая возвращает промис. Этот промис должен завершаться через 2 секунды с сообщением "Данные загружены". Используйте then для вывода сообщения в консоль после завершения промиса.
Решение:
// Определение функции loadData
function loadData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Данные загружены');
}, 2000);
});
}
loadData().then((message) => {
console.log(message); // Данные загружены
});
Объяснение: Мы создали функцию loadData, которая возвращает промис, завершающийся через 2 секунды с сообщением "Данные загружены". Использовали then для вывода сообщения в консоль после завершения промиса.
Упражнение 2: Обработка ошибок в промисе
Создайте функцию fetchData, которая возвращает промис. Этот промис должен завершаться с ошибкой "Ошибка загрузки данных". Используйте catch для обработки этой ошибки и вывода сообщения в консоль.
Решение:
// Определение функции fetchData
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('Ошибка загрузки данных');
}, 2000);
});
}
fetchData().catch((error) => {
console.log(error); // Ошибка загрузки данных
});
Объяснение: Мы создали функцию fetchData, которая возвращает промис, завершающийся с ошибкой "Ошибка загрузки данных". Использовали catch для обработки этой ошибки и вывода сообщения в консоль.