JavaScript Promise
"我保证结果！"
"生成代码" 是可能需要一些时间的代码
"使用代码" 是必须等待结果的代码
Promise 是一个连接生成代码和使用代码的对象
JavaScript Promise 对象
Promise 包含生成代码和对使用代码的调用
Promise 语法
let myPromise = new Promise(function(myResolve, myReject) {
// "生成代码" (可能需要一些时间)
myResolve(); // 成功时
myReject(); // 错误时
});
// "使用代码" (必须等待 Promise 完成)
myPromise.then(
function(value) { /* 成功时代码 */ },
function(error) { /* 错误时代码 */ }
);
当生成代码获得结果时，它应该调用两个回调函数之一
| 当 | 调用 |
|---|---|
| 成功 | myResolve(结果值) |
| 错误 | myReject(错误对象) |
Promise 对象属性
JavaScript Promise 对象可以是
- Pending
- Fulfilled
- Rejected
Promise 对象支持两个属性：state 和 result。
当 Promise 对象处于 "pending" 状态 (正在工作) 时，结果是未定义的。
当 Promise 对象处于 "fulfilled" 状态 时，结果是一个值。
当 Promise 对象处于 "rejected" 状态 时，结果是一个错误对象。
| myPromise.state | myPromise.result |
|---|---|
| "pending" | undefined |
| "fulfilled" | 结果值 |
| "rejected" | 错误对象 |
您无法访问 Promise 属性 state 和 result。
您必须使用 Promise 方法来处理 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 示例
为了演示 Promise 的使用，我们将使用上一章中的回调示例
- 等待超时
- 等待文件
等待超时
使用回调的示例
setTimeout(function() { myFunction("我爱你！！！"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
使用 Promise 的示例
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("我爱你！！"); }, 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("错误: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
使用 Promise 的示例
let myPromise = new Promise(function(myResolve, myReject) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myResolve(req.response);
} else {
myReject("文件未找到");
}
};
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 |
| 2014 年 2 月 | 2015 年 7 月 | 2014 年 4 月 | 2014 年 9 月 | 2014 年 3 月 |
