JavaScript异步控制 ---- Promise的一个简单使用场景

Promise

简单来说，Promise主要就是为了解决异步回调的问题。用Promise来处理异步回调使得代码层次清晰，便于理解，且更加容易维护。

语法

new Promise( /* executor */ function(resolve, reject) { ... } );

参数：一个有两个参数为函数的函数，这个函数会立即执行。你可以在这个方法体中作异步操作，异步操作完成后，应调用resolve函数，Promise有三种状态：pending状态（ 初始状态）；fulfilled状态（操作完成时的状态）；rejected状态（操作失败时的状态）【注意：Promise结束时会再次处于pending状态】 。fulfilled状态与resolve对应，rejected状态与reject对应，也就是异步操作失败后，应调用reject函数。

方法

p.then(onFulfilled[, onRejected]);

p.then(function(value) {
// fulfillment
}, function(reason) {
// rejection
});

参数：onFulfilled是一个函数，Promise完成时调用；onRejected是一个函数，Promise被拒绝即失败时调用。

p.catch(onRejected);

p.catch(function(reason) {
// rejection
});

参数：catch只有一个参数，也是个函数，Promise失败时调用。

详情请查阅：Promise MDN火狐官方开发文档

场景

我们需要使用XMLHttpRequest异步的方式向服务器发送请求来获取token值，然后，使用XMLHttpRequest异步地将获取的token和必要的数据发送到服务器。

这是一个异步嵌套异步的结构。我们将通过Promise对象去实现异步控制。

代码

let saveToServer = function(sJson) {
//获取token
let oPromise = new Promise(function(success, error){
let oXhr = new XMLHttpRequest();
let sUrl = "/getCsrf.html";
oXhr.open("get", sUrl, true);
oXhr.send(null);
oXhr.onreadystatechange = function() {
if(oXhr.readyState == 4) {
if(oXhr.status == 200) {
//oXhr.responseText:"<input type="text" name="${_csrf.parameterName}" value="${_csrf.token}">"
let sInput = oXhr.responseText;
let eInput = {};
//将sInput转为eInput
let eDiv = document.createElement("div");
eDiv.innerHTML = sInput;
if(eDiv.childNodes.length > 0){
eInput = eDiv.childNodes[0];
let sToken = eInput.value;
let sName = eInput.getAttribute("name");
success({sName: sName, sValue: sToken});
}else{
error(oXhr.responseText);
}
}
else
Console.error("saveToServer(): Fail to get _token from server: " + oXhr.status);
}
}
});
//token获取成功，发送打标词组
oPromise.then(function(jToken){
let oXhr = new XMLHttpRequest();
let sUrl = "saveAnnotate.html?"+ jToken.sName + "=" + jToken.sValue;
oXhr.open("post", sUrl, true);

oXhr.send(sJson);
oXhr.onreadystatechange = function() {
if(oXhr.readyState == 4) {
if(oXhr.status == 200) {
let sMsg = oXhr.responseText.trim();
Console.debug("saveToServer(): response is " + sMsg);
if (sMsg.indexOf("success") >= 0) {
…… ……
}
else {
alert("失败！");
}
}
else
Console.error("saveToServer(): Fail to communicate with server: " + oXhr.status);
}
}
});
//token获取失败
oPromise.catch(function(sMsg){
Console.error("saveToServer(): token format error： " + sMsg);
});
}