Обещания JavaScript
«Обещаю результат!»
«Производство кода» — это код, который может занять некоторое время.
«Потребляющий код» — это код, который должен дождаться результата
Обещание — это объект JavaScript, который связывает создание кода и его потребление.
Объект обещания JavaScript
Объект JavaScript Promise содержит как производящий код, так и вызовы потребляющего кода:
Синтаксис обещания
let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Когда производящий код получает результат, он должен вызвать один из двух обратных вызовов:
| Результат | Вызов |
|---|---|
| Успех | myResolve(значение результата) |
| Ошибка | myReject (объект ошибки) |
Свойства объекта обещания
Объект JavaScript Promise может быть:
- В ожидании
- Выполнено
- Отклоненный
Объект Promise поддерживает два свойства: состояние и результат .
Пока объект Promise "ожидает" (работает), результат не определен.
Когда объект Promise "выполнен", результатом является значение.
Когда объект Promise "отклоняется", результатом является объект ошибки.
| myPromise.state | myPromise.result |
|---|---|
| "в ожидании" | неопределенный |
| "выполнено" | значение результата |
| "отклоненный" | объект ошибки |
Вы не можете получить доступ к состоянию свойств Promise и результату .
Вы должны использовать метод Promise для обработки промисов.
Обещай, как
Вот как использовать обещание:
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Promise.then() принимает два аргумента: обратный вызов в случае успеха и еще один в случае неудачи.
Оба являются необязательными, поэтому вы можете добавить обратный вызов только в случае успеха или неудачи.
Пример
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
let x = 0;
// The producing code (this may take some time)
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 |