JavaScript Обещания
"Обещаю результат!"
"Создание кода" - это код, который может занять некоторое время.
"Потребляющий код" - это код, который должен ждать результата.
Обещание - это объект JavaScript, который связывает создание кода и использование кода.
Объект обещания JavaScript
Объект JavaScript обещания содержит как производящий код, так и вызовы потребляющего кода:
Синтаксис обещаний
let myPromise = new Promise(function(myResolve, myReject) {
// "Создание кода" (может занять некоторое время)
myResolve(); // в случае успеха
myReject(); // в случае ошибки
});
// "Потребляющий код" (необходимо дождаться выполнения обещания)
myPromise.then(
function(value) { /* код в случае успеха */ },
function(error) { /* код в случае ошибки */ }
);
Когда исполняемый код получает результат, он должен вызвать один из двух обратных вызовов:
| Результат | Вызов |
|---|---|
| Успех | myResolve(result value) |
| Ошибка | myReject(error object) |
Свойства объекта Promise
Объектом JavaScript Promise может быть:
- В ожидании
- Выполнено
- Отклонено
Объект Promise поддерживает два свойства: state и result.
Пока объект Promise "ожидает" (работает), результат не определен.
Когда объект Promise "выполнен", результатом является значение.
Когда объект Promise "отклонен", результатом является объект ошибки.
| myPromise.state | myPromise.result |
|---|---|
| "в ожидании" | не определен |
| "выполнено" | результат значение |
| "отклонено" | объект ошибки |
Вы не можете получить доступ к состоянию state и result.
Для обработки обещаний необходимо использовать метод обещания.
Как сделать 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;
}
Пример использования обещания
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.
В следующей таблице определяется первая версия браузера с полной поддержкой объектов обещания:
| Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
| Февраль, 2014 | Июль, 2015 | Апрель, 2014 | Сентябрь, 2014 | Март, 2014 |
