前端必知必会-JavaScript Promise 对象

---

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 对象可以是：

待处理
已实现
已拒绝
Promise 对象支持两个属性：状态和结果。

当 Promise 对象处于“待处理”（工作）状态时，结果未定义。

当 Promise 对象“已实现”时，结果是一个值。

当 Promise 对象“已拒绝”时，结果是一个错误对象。

myPromise.state	myPromise.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("Error: " + 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("File not Found");
}
};
req.send();
});

myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);

---

总结

本文介绍了JavaScript Promise 对象的使用，如有问题欢迎私信和评论