85 lines
4.4 KiB
Markdown
85 lines
4.4 KiB
Markdown
---
|
||
sidebar_position: 2
|
||
---
|
||
|
||
# Promises
|
||
Использование Promises (обещаний) в JavaScript — это более современный и удобный способ работы с асинхронными операциями по сравнению с callback-функциями. Promises позволяют избежать "callback hell" и делают код более читаемым и структурированным.
|
||
|
||
Вот пример асинхронного программирования с использованием Promises:
|
||
```js
|
||
// Пример асинхронной функции, которая возвращает 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:
|
||
```js
|
||
fetchData()
|
||
.then((data) => {
|
||
console.log("Данные получены:", data);
|
||
return data.age; // Возвращаем только возраст
|
||
})
|
||
.then((age) => {
|
||
console.log("Возраст пользователя:", age);
|
||
})
|
||
.catch((error) => {
|
||
console.error(error);
|
||
});
|
||
```
|
||
Этот пример показывает, как можно последовательно обрабатывать данные с помощью цепочки `.then()`.
|
||
|
||
💥 **Thenable**
|
||
> Если быть более точными, обработчик может возвращать не именно промис, а любой объект, содержащий метод .then, такие объекты называют «thenable», и этот объект будет обработан как промис.
|
||
|
||
🚀 **Источник Deepseek** |