ES6的Promise到底咋回事
一、簡介
Promise是非同步程式設計的一種解決方法，比傳統的回撥函式和事件更合理更強大。ES6將其寫進js語言標準，統一了用法，原生提供了promise物件。所謂Promise“承諾”，就是儲存著未來會發生的事情，Promise有三種狀態：pending（“進行中”），fulfilled（“已成功”），rejected（“已失敗”），並且一旦進入後兩種狀態就不可更改，它的狀態之手非同步操作結果控制。
二、用法：
新建一個Promise物件：
var promise = new Promise(function(resolve,reject){
//some code
if(success){ //非同步操作成功
resolve(value);
}else{ //非同步操作失敗
reject(error);
}
})
Promise建構函式接收一個函式作為引數，它的兩個引數resolve和reject，是兩個函式，由JavaScript引擎提供，不用自己部署。
resolve函式的作用是：將Promise的狀態從“pending”變為“resolve”，在非同步操作成功時呼叫，並將非同步操作的結果作為引數傳遞出去；
reject函式的作用是：將Promise狀態從“pending”變為“reject”，在非同步操作失敗時呼叫，並將非同步操作報出的錯誤作為引數傳遞出去。
axios就是基於Promise的用於瀏覽器和node的http客戶端，下面是在所作專案中axios的用法，是搜尋頁面的介面。其中的then就是resolve的內容，catch就是reject的內容。當然，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;
});
非同步操作丟擲錯誤狀態成reject，或then方法指定的回撥函式中發生錯誤，就會被catch方法捕獲。Promise的錯誤具有冒泡性質，可以一直向後傳遞到被最後一個catch捕獲。
封裝axios的get請求，作為全域性變數使用。
export const getRequest = (url, params) => {
return axios({
method: 'get',
url: url,
params: params,
});
}
三、其他後臺介面獲取資料方式
1、jquery ajax訪問後臺介面獲取資料：
$.ajax({
type: 'post',
url: '/login',
data: {
//傳遞到後臺的引數 沒有則不寫
user_name: name,
password: password
},
dataType: 'json',
success(res) {
if(res.msgCode == 0){
//alert('登入成功!');
window.location.href = '/';
}else{
alert("錯誤碼：" + res.msgCode + "，" + res.msg);
window.location.href = '/';
}
},
error(err) {
alert('登入失敗!錯誤資訊：'+ err);
return;
}
});
2、原生ajax範文後臺介面獲取資料：
var XHR=null;
var url = '';
if (window.XMLHttpRequest) {
XHR = new XMLHttpRequest();// 非IE核心
} else if (window.ActiveXObject) {
XHR = new ActiveXObject("Microsoft.XMLHTTP");// IE核心,這裡早期IE的版本寫法不同,具體可以查詢下
} else {
XHR = null;
}
if(XHR){
XHR.open("GET", url);
XHR.onreadystatechange = function () {
// readyState值說明
// 0,初始化,XHR物件已經建立,還未執行open
// 1,載入,已經呼叫open方法,但是還沒傳送請求
// 2,載入完成,請求已經發送完成
// 3,互動,可以接收到部分資料
if (XHR.readyState == 4 && XHR.status == 200) {
// 這裡可以對返回的內容做處理
// 一般會返回JSON或XML資料格式
console.log(XHR.responseText);
// 主動釋放,JS本身也會回收的
XHR = null;
}
};
XHR.send();
}
四、方法
1、Promise.prototype.then()
then方法返回的是一個新的 Promise 例項（注意，不是原來那個 Promise 例項）。因此可以採用鏈式寫法，即then方法後面再呼叫另一個then方法。
login(param).then(function(post) {
return param;
}).then(res=> {
console.log("Resolved: ", res);
}, err=>{
console.log("Rejected: ", err);
});
第二個then方法指定的回撥函式會等待這個新的 Promise 物件狀態發生變化。如果變為 Resolved列印res，如果狀態變為 Rejected列印err。
2、Promise.resolve()
將現有物件轉為 Promise 物件
Promise.resolve('foo')
// 等價於
new Promise(resolve => resolve('foo'))
3、Promise.reject()
返回一個新的 Promise 例項，該例項的狀態為rejected。
var p = Promise.reject(' 出錯了 ');
// 等同於
var p = new Promise((resolve, reject) => reject(' 出錯了 '))
p.then(null, function (s){
console.log(s)
});
參考：es6 Promise用法