JS異步那些事 一 （基礎(chǔ)知識(shí)）
JS異步那些事 二 （分布式事件）
JS異步那些事 三 （Promise）
JS異步那些事 四（HTML 5 Web Workers）
JS異步那些事 五 （異步腳本加載）
Promise，Deferred 對(duì)象
前戲
先來(lái)談?wù)刯query中的promise的使用，來(lái)看一個(gè)例子
原本寫一個(gè)小動(dòng)畫我們可能是這樣的
<script type="text/javascript">
$('.animateEle').animate({
opacity:'.5'
}, 4000,function(){
$('.animateEle2').animate({
width:'100px'
},2000,function(){
$('.animateEle3').animate({
height:'0'
},2000);
});
});
</script>
但是如果我們使用promis對(duì)象的話稻据，就可以使得代碼更加簡(jiǎn)單易懂
<script type="text/javascript">
var animate1 = function() {
return $('.animateEle1').animate({opacity:'.5'},4000).promise();
};
var animate2 = function() {
return $('.animateEle2').animate({width:'100px'},2000).promise();
};
var animate3 = function(){
return $('.animateEle3').animate({height:'0'},2000).promise();
};
$.when(animate1()).then(animate2).then(animate3);
</script>
看了上面的例子大概對(duì)promise的作用有一定的了解了吧槽华，那就來(lái)說(shuō)說(shuō)promis的原理吧
Promise對(duì)象方法
對(duì)于DOM吃度，動(dòng)畫项阴，ajax相關(guān)方法喊式，都可以使用 promise 方法锌奴。調(diào)用 promise 方法兽狭，返回的是 promise 對(duì)象。可以鏈?zhǔn)秸{(diào)用 promise 方法箕慧。
比如jquery中的ajax的 $.post $.get $.ajax 等方法服球，實(shí)際上都是默認(rèn)調(diào)用了promise方法，然后返回了一個(gè)promise對(duì)象
promise對(duì)象常見的方法有三個(gè) ： done 颠焦， fail 斩熊， then 。
<script type="text/javascript">
$.get('/',{}).done(function(data){
console.log('success');
}).fail(function(){
console.log('fail');
});
</script>
jquery 這里的接口方法太多了伐庭，就跟早期的事件方法綁定一樣粉渠， live ， delegate 圾另， bind 渣叛，最終還是歸為 on
deferred對(duì)象方法
deferred 對(duì)象呢，也就是使用 $.Deferred() 方法盯捌，以及 $.when() 等方法創(chuàng)造出來(lái)的對(duì)象淳衙，它可以理解為一個(gè)升級(jí)版特殊的的promise對(duì)象
來(lái)看看一個(gè)例子
<script type="text/javascript">
var promisepbj = new $.Deferred();
promisepbj.done(function() {
console.log('haha,done');
}).fail(function() {
console.log('失敗了');
}).always(function(res) {
console.log('我總是被執(zhí)行啦');
});
//使用resolve或者reject就可以調(diào)用defferred對(duì)象了
promisepobj.resolve();
//promisepobj.reject();
resolve 方法會(huì)觸發(fā) done 的回調(diào)執(zhí)行， reject 會(huì)觸發(fā) fail 的回調(diào)饺著，對(duì)于 always 方法,deferred 對(duì)象,無(wú)論是 resolve 還是 reject 箫攀，都會(huì)觸發(fā)該方法的回調(diào)。
ES6 Promise
前面講了很多jquery的promise實(shí)現(xiàn)幼衰，$.Deferred 和 ES2015 的 Promise 是不同的東西靴跛，因?yàn)榍罢卟环?Promises/A+ 規(guī)范。 Promise 對(duì)象在 EMCAScript 2015 當(dāng)中已經(jīng)成為標(biāo)準(zhǔn)《上現(xiàn)在要來(lái)談?wù)勸R上要成為主流趨勢(shì)的es6原生promise對(duì)象梢睛，首先貼一個(gè)很詳細(xì)的es6 promise的小書，基本你知道的不知道都在里面 http://liubin.org/promises-book/#introduction识椰，
把promise解釋的很清楚的文章很多绝葡，我自認(rèn)為我寫不到他們那么好，索性干脆把阮一峰大神的文章貼出來(lái) http://es6.ruanyifeng.com/#docs/promise
我就來(lái)個(gè)簡(jiǎn)化版本的吧腹鹉，用最短的字?jǐn)?shù)來(lái)入個(gè)門藏畅。
定義：
謂Promise，簡(jiǎn)單說(shuō)就是一個(gè)容器功咒，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果愉阎。
特點(diǎn)：
- 有三種狀態(tài)：Pending（進(jìn)行中）、Resolved（已完成力奋，又稱Fulfilled）和Rejected（已失敯竦）。
- 一旦狀態(tài)改變景殷，就不會(huì)再變溅呢，任何時(shí)候都可以得到這個(gè)結(jié)果锉走。Promise對(duì)象的狀態(tài)改變，只有兩種可能：從Pending變?yōu)镽esolved和從Pending變?yōu)镽ejected藕届。只要這兩種情況發(fā)生，狀態(tài)就凝固了
基本用法
<script type="text/javascript">
var promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 異步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
</script>
Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)亭饵，該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject休偶。
<script type="text/javascript">
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}
timeout(100).then((value) => {
console.log(value);
});
</script>
上面代碼中，timeout方法返回一個(gè)Promise實(shí)例辜羊，表示一段時(shí)間以后才會(huì)發(fā)生的結(jié)果踏兜。過(guò)了指定的時(shí)間（ms參數(shù)）以后，Promise實(shí)例的狀態(tài)變?yōu)镽esolved八秃，就會(huì)觸發(fā)then方法綁定的回調(diào)函數(shù)碱妆。
異常處理
異常處理一直是回調(diào)的難題，而promise提供了非常方便的catch方法：在一次promise調(diào)用中昔驱，任何的環(huán)節(jié)發(fā)生reject疹尾，都可以在最終的catch中捕獲到：
Promise.resolve().then(function(){
return loadImage(img1);
}).then(function(){
return loadImage(img2);
}).then(function(){
return loadImage(img3);
}).catch(function(err){
//錯(cuò)誤處理
})
基本的 api
Promise.resolve()
Promise.reject()
Promise.prototype.then()
Promise.prototype.catch()
Promise.all()
Promise.race()
小結(jié)
具體的很多的用法可以參考阮一峰的 http://es6.ruanyifeng.com/#docs/promise 入門教程，還有就是上面提到的電子書 http://liubin.org/promises-book/#introduction骤肛。
