2.1 Створення промісів
Проміси (Promises) — це об'єкт, що представляє завершення (або невдачу) асинхронної операції та її результат. Вони були введені в ES6 (ECMAScript 2015) і стали стандартним способом роботи з асинхронним кодом у JavaScript.
Основні концепції
Проміс може знаходитись в одному з трьох станів:
- Pending (очікування): початковий стан, не виконано і не відхилено.
- Fulfilled (виконано): операція завершена успішно.
- Rejected (відхилено): операція завершена з помилкою.
Створення промісу
Проміс створюється за допомогою конструктора Promise, який приймає функцію-виконавця (executor function). Ця функція приймає два аргументи: resolve і reject. Всередині цієї функції виконується асинхронний код, і у разі успіху викликається resolve, а у разі помилки — reject.
Синтаксис:
const promise = new Promise((resolve, reject) => {
// Асинхронна операція
if (/* успішне завершення */) {
resolve(value); // Успіх
} else {
reject(error); // Помилка
}
});
Приклад створення промісу:
const myPromise = new Promise((resolve, reject) => {
const success = true; // Умова для успішного виконання
if (success) {
resolve('Операція була успішною');
} else {
reject('Операція не вдалася');
}
});
2.2 Використання промісів
Метод then
Метод then використовується для обробки успішного виконання промісу. Він приймає дві функції: першу для обробки успішного виконання та другу для обробки помилок. Проте зазвичай для обробки помилок використовується метод catch.
Приклад використання then:
myPromise.then(
(successMessage) => {
console.log(successMessage); // Виведе: Операція була успішною
},
(errorMessage) => {
console.error(errorMessage); // Буде викликано у разі помилки
}
);
Метод catch
Метод catch використовується для обробки помилок промісу. Він приймає одну функцію, яка буде викликана у разі відхилення промісу.
Приклад використання catch:
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage); // Буде викликано: Операція не вдалася
});
Метод finally
Метод finally використовується для виконання коду незалежно від результату промісу (успішний чи з помилкою). Він не приймає аргументів і виконується у будь-якому випадку після виконання чи відхилення промісу.
Приклад використання finally:
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage);
})
.finally(() => {
console.log('Операція завершена'); // Буде викликано у будь-якому випадку
});
2.3 Приклади використання промісів
Приклад 1: Асинхронна операція з використанням промісу
Симуляція асинхронної операції з таймером.
function asyncOperation() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve('Асинхронна операція була успішною');
} else {
reject('Асинхронна операція не вдалася');
}
}, 2000);
});
}
asyncOperation()
.then((message) => {
console.log(message);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Асинхронна операція завершена');
});
Приклад 2: Послідовне виконання промісів
Симуляція послідовних асинхронних операцій.
function firstOperation() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Перша операція завершена');
resolve('Результат першої операції');
}, 1000);
});
}
function secondOperation(result) {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Друга операція завершена');
resolve(`Результат другої операції, отримано: ${result}`);
}, 1000);
});
}
firstOperation()
.then((result) => {
return secondOperation(result);
})
.then((finalResult) => {
console.log(finalResult);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Обидві операції завершені');
});
Приклад 3: Паралельне виконання промісів з Promise.all
Симуляція паралельних асинхронних операцій.
function operationOne() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Операція Один завершена');
resolve('Результат Один');
}, 1000);
});
}
function operationTwo() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Операція Два завершена');
resolve('Результат Два');
}, 1500);
});
}
Promise.all([operationOne(), operationTwo()])
.then((results) => {
console.log('Усі операції завершені');
console.log(results); // Виведе: ['Результат Один', 'Результат Два']
})
.catch((error) => {
console.error('Одна з операцій зазнала невдачі', error);
});
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ