01:06
Урок 17: Промисы

Курс по программированию на JavaScript

Урок 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 для обработки этой ошибки и вывода сообщения в консоль.

Категория: JavaScript | Просмотров: 12 | Добавил: Admin | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: