JavaScript Промисы
"Я обещаю (promise) результат!"
"Продуцирование кода" ("Создание кода") - это код, который может занять некоторое время.
"Потребляющий код" - это код, который должен ждать результата.
Промис (promise - обещание) - это JavaScript объект, который связывает создание кода и использование кода.
JavaScript объект Промис
JavaScript объект Промис содержит как производящий код, так и вызовы потребляющего кода:
Синтаксис Промиса
let myPromise = new Promise(function(myResolve, myReject) {
// "Создание кода" (может занять некоторое время)
myResolve(); // при успехе
myReject(); // при ошибке
});
// "Потребляющий код" (необходимо дождаться выполнения Промиса)
myPromise.then(
function(value) { /* код в случае успеха */ },
function(error) { /* код в случае ошибки */ }
);
Когда производящий код получает результат, он должен вызвать один из двух обратных вызовов:
| Результат | Вызов |
|---|---|
| Success | myResolve(result value) |
| Error | myReject(error object) |
Свойства объекта Промис
JavaScript объект Промис может быть:
- Pending (ожидает)
- Fulfilled (выполнено)
- Rejected (отклонено)
Объект Промис поддерживает два свойства: состояние и результат.
Пока объект Промис является "pending" (работает), результатом является undefined (не определен).
Пока объект Промис является "fulfilled" (выполнен), результатом является значение.
Пока объект Промис является "rejected" (отклонён), результатом является объект error (ошибка).
| myPromise.state | myPromise.result |
|---|---|
| "pending" | undefined |
| "fulfilled" | результат значение |
| "rejected" | объект error |
Вы не можете получить доступ к свойствам Промиса состояние и результат.
Для обработки Промисов необходимо использовать метод 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 Примеры Промиса
Чтобы продемонстрировать использование промисов, мы будем использовать примеры обратного вызова из предыдущей главы:
- Ожидание тайм-аута
- Ожидание файла
Ожидание тайм-аута
Пример использования обратного вызова
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Попробуйте сами »
Пример использования Промиса
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);
Попробуйте сами »
Пример использования Промиса
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 |
