Promise用法及使用案例
想了解更多方法請參考阮一峰老師的教程：http://es6.ruanyifeng.com/#docs/promise
1.Promise的含義
Promise是非同步程式設計的一種解決方案，比傳統的解決方案（回撥函式和事件）更合理更強大。
所謂Promise，簡單說就是一個容器，裡面儲存著某個未來才會結束的事件 (通常是一個非同步操作)的結果。從語法上說，Promise是一個物件，從它可以獲取非同步操作的訊息。
這麼一看就明白了，Promise是一個建構函式，自己身上有all、reject、resolve這幾個眼熟的方法，原型上有then、catch等同樣很眼熟的方法。這麼說用Promise new出來的物件肯定就有then、catch方法嘍。
2.基本用法
ES6規定，Promise物件是一個建構函式，用來生成Promise例項
var promise = new Promise(function(resolve,reject){
if(/* 非同步操作成功 */){
resolve(value);
}else{
reject(error);
}
});
Promise建構函式接受一個函式作為引數，該函式的兩個引數分別是resolve和reject,分別表示非同步操作執行成功後的回撥函式和非同步操作執行失敗後的回撥函式。它們是兩個函式，又JavaScript引擎提供，不是自己部署。
resolve函式的作用，將Promise物件的狀態從“未完成”變成“成功”(即從Pending變為Resolved)，在非同步操作成功時呼叫，並將非同步操作的結果，作為引數傳遞出去；reject函式的作用是，在非同步操作失敗時呼叫，並將非同步操作報出的錯誤，作為引數傳遞出去。
看下面這段程式碼：
var p = new Promise(function(resolve, reject){ //做一些非同步操作 setTimeout(function(){ console.log('執行完成'); resolve('資料'); }, 2000); });
在上面的程式碼中，我們執行了一個非同步操作，也就是setTimeout，2秒後，輸出“執行完成”，並且呼叫resolve方法。
執行程式碼，會在2秒後輸出“執行完成”。注意！我只是new了一個物件，並沒有呼叫它，我們傳進去的函式就已經執行了，這是需要注意的一個細節。所以我們用Promise的時候一般是包在一個函式中，在需要的時候去執行這個函式，如：
function runAsync(){
var p = new Promise(function(resolve, reject){
//做一些非同步操作
setTimeout(function(){
console.log('執行完成');
resolve('資料');
}, 2000);
});
return p;
}
runAsync()在我們包裝好的函式最後，會return出Promise物件，也就是說，執行這個函式我們得到了一個Promise物件。還記得Promise物件上有then、catch方法吧？這就是強大之處了，看下面的程式碼：
runAsync().then(function(data){
console.log(data);
//後面可以用傳過來的資料做些其他操作
//......
});在runAsync()的返回上直接呼叫then方法，then接收一個引數，是函式，並且會拿到我們在runAsync中呼叫resolve時傳的的引數。執行這段程式碼，會在2秒後輸出“執行完成”，緊接著輸出“資料”。
這時候你應該有所領悟了，原來then裡面的函式就跟我們平時的回撥函式一個意思，能夠在runAsync這個非同步任務執行完成之後被執行。這就是Promise的作用了，簡單來講，就是能把原來的回撥寫法分離出來，在非同步操作執行完後，用鏈式呼叫的方式執行回撥函式。
或許你會認為：我們把回撥函式封裝一下，給runAsync傳進去不也一樣嗎，就像這樣：
function runAsync(callback){
setTimeout(function(){
console.log('執行完成');
callback('資料');
}, 2000);
}
runAsync(function(data){
console.log(data);
});那麼問題來了，有多層回撥該怎麼辦？如果callback也是一個非同步操作，而且執行完後也需要有相應的回撥函式，該怎麼辦呢？總不能再定義一個callback2，然後給callback傳進去吧。而Promise的優勢在於，可以在then方法中繼續寫Promise物件並返回，然後繼續呼叫then來進行回撥操作。
3.鏈式操作的用法
function runAsync1(){
var p = new Promise(function(resolve, reject){
//做一些非同步操作
setTimeout(function(){
console.log('非同步任務執行完成1');
resolve('資料1');
}, 1000);
});
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
//做一些非同步操作
setTimeout(function(){
console.log('非同步任務執行完成2');
resolve('資料2');
}, 2000);
});
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
//做一些非同步操作
setTimeout(function(){
console.log('非同步任務執行完成3');
resolve('資料3');
}, 2000);
});
return p;
}
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return runAsync3();
})
.then(function(data){
console.log(data);
});控制檯輸出：
非同步任務執行完成1
資料1
非同步任務執行完成2
資料2
非同步任務執行完成3
資料3在then方法中，你也可以直接return資料而不是Promise物件，在後面的then中就可以接收到資料了，比如我們把上面的程式碼修改成這樣：
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return '直接返回資料'; //這裡直接返回資料
})
.then(function(data){
console.log(data);
});那麼輸出就變成了這樣：
非同步任務執行完成1
資料1
非同步任務執行完成2
資料2
直接返回資料4.reject的用法
到這裡，你應該對“Promise是什麼玩意”有了最基本的瞭解。那麼我們接著來看看ES6的Promise還有哪些功能。我們光用了resolve，還沒用reject呢，它是做什麼的呢？事實上，我們前面的例子都是隻有“執行成功”的回撥，還沒有“失敗”的情況，reject的作用就是把Promise的狀態置為rejected，這樣我們在then中就能捕捉到，然後執行“失敗”情況的回撥。看下面的程式碼。
function getNumber(){
var p = new Promise(function(resolve, reject){
//做一些非同步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的隨機數
if(num<=5){
resolve(num);
}
else{
reject('數字太大了');
}
}, 2000);
});
return p;
}
getNumber()
.then(
function(data){
console.log('resolved');
console.log(data);
},
function(reason, data){
console.log('rejected');
console.log(reason);
}
);getNumber函式用來非同步獲取一個數字，2秒後執行完成，如果數字小於等於5，我們認為是“成功”了，呼叫resolve修改Promise的狀態。否則我們認為是“失敗”了，呼叫reject並傳遞一個引數，作為失敗的原因。
執行getNumber並且在then中傳了兩個引數，then方法可以接受兩個引數，第一個對應resolve的回撥，第二個對應reject的回撥。所以我們能夠分別拿到他們傳過來的資料。多次執行這段程式碼，你會隨機得到下面兩種結果：
catch的用法
我們知道Promise物件除了then方法，還有一個catch方法，它是做什麼用的呢？其實它和then的第二個引數一樣，用來指定reject的回撥，用法是這樣：
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});效果和寫在then的第二個引數裡面一樣。不過它還有另外一個作用：在執行resolve的回撥（也就是上面then中的第一個引數）時，如果丟擲異常了（程式碼出錯了），那麼並不會報錯卡死js，而是會進到這個catch方法中。請看下面的程式碼：
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
console.log(somedata); //此處的somedata未定義
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});在resolve的回撥中，我們console.log(somedata);而somedata這個變數是沒有被定義的。如果我們不用Promise，程式碼執行到這裡就直接在控制檯報錯了，不往下運行了。但是在這裡，會得到這樣的結果：
resolved
4
rejected
ReferenceError:somedata is not defined(...)也就是說進到catch方法裡面去了，而且把錯誤原因傳到了reason引數中。即便是有錯誤的程式碼也不會報錯了，這與我們的try/catch語句有相同的功能。
all的用法
Promise的all方法提供了並行執行非同步操作的能力，並且在所有非同步操作執行完後才執行回撥。我們仍舊使用上面定義好的runAsync1、runAsync2、runAsync3這三個函式，看下面的例子：
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);
});用Promise.all來執行，all接收一個數組引數，裡面的值最終都算返回Promise物件。這樣，三個非同步操作的並行執行的，等到它們都執行完後才會進到then裡面。，all會把所有非同步操作的結果放進一個數組中傳給then，就是上面的results。所以上面程式碼的輸出結果就是：
非同步任務執行完成1
非同步任務執行完成2
非同步任務執行完成3
["資料1","資料2","資料3"]Ajax中的使用案例
假如有a,b請求，b依賴a的請求資料。如下：
function a(){
return new Promise(function(res,rej){
$.ajax({
url:"a介面",
type: "GET",
async:true,
dataType:"json",
success:function(data){
console.log(data,"a");
res(data);
}
})
});
}
function b(data){
console.log(data,"data");
return new Promise(function(res,rej){
$.ajax({
url:"b介面",
type: "POST",
async:true,
data:JSON.stringify(data),
dataType:"json",
success:function(data){
console.log(data,"b");
res();
}
})
});
}
$("#btn").click(function(){
a().then(function (data){
b(data);
}).then(function(){
})
})注：Axios 是一個基於 promise 的 HTTP 庫。
想了解更多方法請參考阮一峰老師的教程：http://es6.ruanyifeng.com/#docs/promise