JavaScript Promise / Проміси
"Я обіцяю результат!"
"Створення коду" – це код, який може зайняти деякий час.
"Код, що споживається" – це код, який повинен чекати на результат.
Promise — це об’єкт JavaScript, який пов’язує код, що створюється, і код, який споживається.
JavaScript Об’єкт Promise / Проміс
JavaScript об’єкт Promise містить як створюючий код, так і виклики споживаючого коду:
Синтаксис Promise
let myPromise = new Promise(function(myResolve, myReject) {
// "Створення коду" (може зайняти деякий час)
myResolve(); // коли успіх
myReject(); // коли помилка
});
// "Код споживання" (потрібно дочекатися виконання промісу)
myPromise.then(
function(value) { /* код у разі успіху */ },
function(error) { /* код у разі помилки */ }
);
Коли створюючий код отримує результат, він повинен викликати один із двох зворотних викликів:
| Результат | Виклик |
|---|---|
| Успіх | myResolve(result value) |
| Помилка | myReject(error object) |
Властивості об’єкта Promise
Об’єкт JavaScript Promise може бути:
- Pending / Очікує на розгляд
- Fulfilled / Виконано
- Rejected / Відхилено
Об’єкт Promise підтримує дві властивості: state та result.
Поки об’єкт Promise "очікує" (працює), результат undefined (не визначений).
Коли об’єкт Promise "виконано", результатом є value (значення).
Коли об’єкт Promise "відхилено", результатом є об’єкт error (помилка).
| myPromise.state | myPromise.result |
|---|---|
| "pending" | undefined |
| "fulfilled" | a result value |
| "rejected" | an error object |
Ви не можете отримати доступ до стану та результату властивостей Promise.
Для обробки промісів потрібно використовувати метод Promise.
Обіцяйте, як ви це будете робити
Ось як використовувати Promise:
myPromise.then(
function(value) { /* код у разі успіху */ },
function(error) { /* код у разі помилки */ }
);
Promise.then() приймає два аргументи: зворотний виклик для успіху та інший для невдачі.
Обидва є необов’язковими, тому ви можете додати зворотний виклик лише для успіху чи невдачі.
Приклад
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
let x = 0;
// Виробничий код (це може зайняти деякий час)
if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Спробуйте самі »
JavaScript Promise Приклади
Щоб продемонструвати використання промісів, ми використаємо приклади зворотного виклику з попереднього розділу:
- Очікування тайм-ауту
- Очікування файлу
Очікування тайм-ауту
Приклад використання зворотного виклику
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Спробуйте самі »
Приклад використання Promise
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Спробуйте самі »
Очікування файлу
Приклад використання зворотного виклику
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(req.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
Спробуйте самі »
Приклад використання Promise
let myPromise = new Promise(function(myResolve, myReject) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.htm");
req.onload = function() {
if (req.status == 200) {
myResolve(req.response);
} else {
myReject("File not Found");
}
};
req.send();
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Спробуйте самі »
Підтримка браузерами
ECMAScript 2015, також відомий як ES6, представив об’єкт JavaScript Promise.
У наступній таблиці визначено першу версію браузера з повною підтримкою об’єктів Promise:
| Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
| Feb, 2014 | Jul, 2015 | Apr, 2014 | Sep, 2014 | Mar, 2014 |
