一姥芥、簡(jiǎn)介
Promise是異步編程的一種解決方法，比傳統(tǒng)的回調(diào)函數(shù)和事件更合理更強(qiáng)大岳守。ES6將其寫進(jìn)js語(yǔ)言標(biāo)準(zhǔn)，統(tǒng)一了用法碌冶，原生提供了promise對(duì)象湿痢。所謂Promise“承諾”，就是保存著未來(lái)會(huì)發(fā)生的事情扑庞，Promise有三種狀態(tài)：pending（“進(jìn)行中”）譬重，fulfilled（“已成功”），rejected（“已失敗”）罐氨，并且一旦進(jìn)入后兩種狀態(tài)就不可更改臀规，它的狀態(tài)之手異步操作結(jié)果控制。
二栅隐、用法：
新建一個(gè)Promise對(duì)象：
var promise = new Promise(function(resolve,reject){
//some code
if(success){ //異步操作成功
resolve(value);
}else{ //異步操作失敗
reject(error);
}
})
Promise構(gòu)造函數(shù)接收一個(gè)函數(shù)作為參數(shù)塔嬉，它的兩個(gè)參數(shù)resolve和reject，是兩個(gè)函數(shù)租悄，由JavaScript引擎提供谨究，不用自己部署。
resolve函數(shù)的作用是：將Promise的狀態(tài)從“pending”變?yōu)椤皉esolve”泣棋，在異步操作成功時(shí)調(diào)用胶哲，并將異步操作的結(jié)果作為參數(shù)傳遞出去；
reject函數(shù)的作用是：將Promise狀態(tài)從“pending”變?yōu)椤皉eject”潭辈，在異步操作失敗時(shí)調(diào)用鸯屿，并將異步操作報(bào)出的錯(cuò)誤作為參數(shù)傳遞出去。
axios就是基于Promise的用于瀏覽器和node的http客戶端把敢，下面是在所作項(xiàng)目中axios的用法寄摆，是搜索頁(yè)面的接口。其中的then就是resolve的內(nèi)容技竟，catch就是reject的內(nèi)容冰肴。當(dāng)然，self.getRequest是用axios封裝后的全局變量榔组。
let url = 'search/' + self.searchType;
let model = {};
let page = self.currentPage - 1;
model = {
searchValue: self.searchValue,
page: page,
size: 10,
operatingStatus: self.operatingStatus,
establishTimeType: self.establishTimeType,
};
self.getRequest(url, model).then((res) => {
self.successCallBack(res);
}).catch(err => {
console.log(err);
self.nodata = true;
self.loading = false;
});
異步操作拋出錯(cuò)誤狀態(tài)成reject熙尉，或then方法指定的回調(diào)函數(shù)中發(fā)生錯(cuò)誤，就會(huì)被catch方法捕獲搓扯。Promise的錯(cuò)誤具有冒泡性質(zhì)检痰，可以一直向后傳遞到被最后一個(gè)catch捕獲。
封裝axios的get請(qǐng)求锨推，作為全局變量使用铅歼。
export const getRequest = (url, params) => {
return axios({
method: 'get',
url: url,
params: params,
});
}
三公壤、其他后臺(tái)接口獲取數(shù)據(jù)方式
1、jquery ajax訪問(wèn)后臺(tái)接口獲取數(shù)據(jù)：
$.ajax({
type: 'post',
url: '/login',
data: {
//傳遞到后臺(tái)的參數(shù) 沒(méi)有則不寫
user_name: name,
password: password
},
dataType: 'json',
success(res) {
if(res.msgCode == 0){
//alert('登錄成功!');
window.location.href = '/';
}else{
alert("錯(cuò)誤碼：" + res.msgCode + "椎椰，" + res.msg);
window.location.href = '/';
}
},
error(err) {
alert('登錄失敗!錯(cuò)誤信息：'+ err);
return;
}
});
2厦幅、原生ajax范文后臺(tái)接口獲取數(shù)據(jù)：
var XHR=null;
var url = '';
if (window.XMLHttpRequest) {
XHR = new XMLHttpRequest(); // 非IE內(nèi)核
} else if (window.ActiveXObject) {
XHR = new ActiveXObject("Microsoft.XMLHTTP"); // IE內(nèi)核,這里早期IE的版本寫法不同,具體可以查詢下
} else {
XHR = null;
}
if(XHR){
XHR.open("GET", url);
XHR.onreadystatechange = function () {
// readyState值說(shuō)明
// 0,初始化,XHR對(duì)象已經(jīng)創(chuàng)建,還未執(zhí)行open
// 1,載入,已經(jīng)調(diào)用open方法,但是還沒(méi)發(fā)送請(qǐng)求
// 2,載入完成,請(qǐng)求已經(jīng)發(fā)送完成
// 3,交互,可以接收到部分?jǐn)?shù)據(jù)
if (XHR.readyState == 4 && XHR.status == 200) {
// 這里可以對(duì)返回的內(nèi)容做處理
// 一般會(huì)返回JSON或XML數(shù)據(jù)格式
console.log(XHR.responseText);
// 主動(dòng)釋放,JS本身也會(huì)回收的
XHR = null;
}
};
XHR.send();
}
四、方法
1慨飘、Promise.prototype.then()
then方法返回的是一個(gè)新的 Promise 實(shí)例（注意确憨，不是原來(lái)那個(gè) Promise 實(shí)例）。因此可以采用鏈?zhǔn)綄懛ㄈ康模磘hen方法后面再調(diào)用另一個(gè)then方法休弃。
login(param).then(function(post) {
return param;
}).then(res=> {
console.log("Resolved: ", res);
}, err=>{
console.log("Rejected: ", err);
});
第二個(gè)then方法指定的回調(diào)函數(shù)會(huì)等待這個(gè)新的 Promise 對(duì)象狀態(tài)發(fā)生變化。如果變?yōu)?Resolved打印res圈膏，如果狀態(tài)變?yōu)?Rejected打印err塔猾。
2、Promise.resolve()
將現(xiàn)有對(duì)象轉(zhuǎn)為 Promise 對(duì)象
Promise.resolve('foo')
// 等價(jià)于
new Promise(resolve => resolve('foo'))
3稽坤、Promise.reject()
返回一個(gè)新的 Promise 實(shí)例丈甸，該實(shí)例的狀態(tài)為rejected。
var p = Promise.reject(' 出錯(cuò)了 ');
// 等同于
var p = new Promise((resolve, reject) => reject(' 出錯(cuò)了 '))
p.then(null, function (s){
console.log(s)
});
