JavaScript Promise
"I Promise a Result!"
"Producing code（生产代码）" 是需要一些时间的代码
"Consuming code（消费代码）" 是必须等待结果的代码
Promise 是一个 JavaScript 对象，它链接生成代码和消费代码
JavaScript Promise 对象
JavaScript Promise 对象包含生产代码和对消费代码的调用：
Promise 语法
let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code"（可能需要一些时间）
myResolve(); // 成功时
myReject(); // 出错时
});
// "Consuming Code" （必须等待一个兑现的承诺）
myPromise.then(
function(value) { /* 成功时的代码 */ },
function(error) { /* 出错时的代码 */ }
);
当执行代码获得结果时，它应该调用两个回调之一：
| 结果 | 调用 |
|---|---|
| 成功 | myResolve(result value) |
| 出错 | myReject(error object) |
Promise 对象属性
JavaScript Promise 对象可以是：
- Pending
- Fulfilled
- Rejected
Promise 对象支持两个属性：state 和 result。
当 Promise 对象 "pending"（工作）时，结果是 undefined。
当 Promise 对象 "fulfilled" 时，结果是一个值。
当一个 Promise 对象是 "rejected" 时，结果是一个错误对象。
| myPromise.state | myPromise.result |
|---|---|
| "pending" | undefined |
| "fulfilled" | 结果值 |
| "rejected" | error 对象 |
您无法访问 Promise 属性 state 和 result。
您必须使用 Promise 方法来处理 Promise。
如何使用 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;
// 生成代码（这可能需要一些时间）
if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
JavaScript Promise 实例
为了演示 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 | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
| 2014 年 2 月 | 2015 年 7 月 | 2014 年 4 月 | 2014 年 9 月 | 2014 年 3 月 |