Javascript語(yǔ)言將任務(wù)的執(zhí)行模式分成兩種：同步（Synchronous）和異步（Asynchronous）

我們知道 javascript語(yǔ)言是單線程機(jī)制冤荆。所謂單線程就是按次序執(zhí)行，執(zhí)行完一個(gè)任務(wù)再執(zhí)行下一個(gè)权纤。對(duì)于瀏覽器來(lái)說(shuō)钓简，也就是無(wú)法在渲染頁(yè)面的同時(shí)執(zhí)行代碼。
??單線程機(jī)制的優(yōu)點(diǎn)在于實(shí)現(xiàn)起來(lái)較為簡(jiǎn)單汹想，運(yùn)行環(huán)境相對(duì)簡(jiǎn)單蚯窥。缺點(diǎn)在于阱缓，如果中間有任務(wù)需要響應(yīng)時(shí)間過(guò)長(zhǎng)婉刀，經(jīng)常會(huì)導(dǎo)致頁(yè)面加載錯(cuò)誤或者瀏覽器無(wú)響應(yīng)的狀況匀钧。這就是所謂的“同步模式”，程序執(zhí)行順序與任務(wù)排列順序一致槽唾。
??對(duì)于瀏覽器來(lái)說(shuō)丧枪，同步模式效率較低，耗時(shí)長(zhǎng)的任務(wù)都應(yīng)該使用異步模式庞萍；"異步模式"非常重要拧烦，在瀏覽器端，耗時(shí)很長(zhǎng)的操作都應(yīng)該異步執(zhí)行钝计，避免瀏覽器失去響應(yīng)屎篱，最好的例子就是Ajax操作服赎。而在服務(wù)器端，異步模式則是唯一的模式交播，因?yàn)閳?zhí)行環(huán)境是單線程的重虑，如果允許同步執(zhí)行所有http請(qǐng)求，服務(wù)器性能會(huì)急劇下降秦士，很快就會(huì)失去響應(yīng)缺厉。。

異步模式的四種方式：

1.回調(diào)函數(shù)callback

所謂回調(diào)函數(shù)隧土，就是將函數(shù)作為參數(shù)傳到需要回調(diào)的函數(shù)內(nèi)部再執(zhí)行提针。

• 典型的例子就是發(fā)送ajax請(qǐng)求。例如：

$.ajax({
    async: false, 
    cache: false,
    dataType: 'json',
    url: "url",
    success: function(data) {
      console.log('success');
    },
    error: function(data) {
     console.log('error');
    }
  })

/*當(dāng)發(fā)送ajax請(qǐng)求后曹傀，等待回應(yīng)的過(guò)程不會(huì)堵塞程序運(yùn)行辐脖，耗時(shí)的操作相當(dāng)于延后執(zhí)行。
回調(diào)函數(shù)的優(yōu)點(diǎn)在于簡(jiǎn)單皆愉，容易理解嗜价，但是可讀性較差，耦合度較高幕庐，不易于維護(hù)久锥。*/

• 假定有兩個(gè)函數(shù)f1和f2，后者等待前者的執(zhí)行結(jié)果异剥。

f1();
f2();

如果f1是一個(gè)很耗時(shí)的任務(wù)瑟由，可以考慮改寫f1，把f2寫成f1的回調(diào)函數(shù)冤寿。

function f1(callback){
  setTimeout(function () {
　　// f1的任務(wù)代碼
　　callback();
　}, 1000);
}
//執(zhí)行代碼
f1(f2);

采用這種方式歹苦，我們把同步操作變成了異步操作，f1不會(huì)堵塞程序運(yùn)行督怜，相當(dāng)于先執(zhí)行程序的主要邏輯暂氯，將耗時(shí)的操作推遲執(zhí)行。

回調(diào)函數(shù)的優(yōu)點(diǎn)是簡(jiǎn)單亮蛔、容易理解和部署，缺點(diǎn)是不利于代碼的閱讀和維護(hù)擎厢，各個(gè)部分之間高度耦合（Coupling）究流，流程會(huì)很混亂，而且每個(gè)任務(wù)只能指定一個(gè)回調(diào)函數(shù)动遭。

2.事件驅(qū)動(dòng)（Event-Driven）

事件驅(qū)動(dòng)芬探，指的是由鼠標(biāo)和熱鍵的動(dòng)作引發(fā)的一連串的程序操作。任務(wù)的執(zhí)行不取決于代碼的順序厘惦，而取決于某個(gè)事件是否發(fā)生偷仿。
例如哩簿，為頁(yè)面上的某個(gè)綁定click事件；

$('#Btn').onclick(function(){
   console.log('click button');
});

綁定事件相當(dāng)于在元素上進(jìn)行監(jiān)聽酝静，是否執(zhí)行注冊(cè)的事件代碼取決于事件是否發(fā)生节榜。
??優(yōu)點(diǎn)在于容易理解，一個(gè)元素上可以綁定多個(gè)事件别智，有利于實(shí)現(xiàn)模塊化宗苍；但是缺點(diǎn)在于稱為事件驅(qū)動(dòng)的模型后，流程不清晰薄榛。

3.發(fā)布/訂閱

發(fā)布訂閱模式（publish-subscribe pattern）又稱為觀察者模式(Observer pattern)讳窟。該模式中，有兩類對(duì)象：觀察者和目標(biāo)對(duì)象敞恋。目標(biāo)對(duì)象中存在著一份觀察者的列表丽啡，當(dāng)目標(biāo)對(duì)象的狀態(tài)發(fā)生改變時(shí)，主動(dòng)通知觀察者硬猫，從而建立一種發(fā)布/訂閱的關(guān)系补箍。
??上一節(jié)的"事件驅(qū)動(dòng)"，完全可以理解成"信號(hào)"浦徊。我們假定馏予，存在一個(gè)"信號(hào)中心"，某個(gè)任務(wù)執(zhí)行完成盔性，就向信號(hào)中心"發(fā)布"（publish）一個(gè)信號(hào)霞丧，其他任務(wù)可以向信號(hào)中心"訂閱"（subscribe）這個(gè)信號(hào)，從而知道什么時(shí)候自己可以開始執(zhí)行冕香。這就叫做"發(fā)布/訂閱模式"（publish-subscribe pattern）蛹尝，又稱"觀察者模式"（observer pattern）。
這個(gè)模式有多種實(shí)現(xiàn)悉尾，下面采用的是Ben Alman的Tiny Pub/Sub突那，這是jQuery的一個(gè)插件。
首先构眯，f2向"信號(hào)中心"jQuery訂閱"done"信號(hào)愕难。

jQuery.subscribe("done", f2);

然后，f1進(jìn)行如下改寫：

function f1(){
　setTimeout(function () {
　　　// f1的任務(wù)代碼
　　　jQuery.publish("done");
　}, 1000);
}

jQuery.publish("done")的意思是惫霸，f1執(zhí)行完成后猫缭，向"信號(hào)中心"jQuery發(fā)布"done"信號(hào)，從而引發(fā)f2的執(zhí)行壹店。
此外猜丹，f2完成執(zhí)行后，也可以取消訂閱（unsubscribe）硅卢。

jQuery.unsubscribe("done", f2);

這種方法的性質(zhì)與"事件監(jiān)聽"類似射窒，但是明顯優(yōu)于后者藏杖。因?yàn)槲覀兛梢酝ㄟ^(guò)查看"消息中心"，了解存在多少信號(hào)脉顿、每個(gè)信號(hào)有多少訂閱者蝌麸，從而監(jiān)控程序的運(yùn)行。

4.promise模式

這才是重點(diǎn)弊予，Promises對(duì)象是CommonJS工作組提出的一種規(guī)范祥楣，目的是為異步編程提供統(tǒng)一接口簡(jiǎn)單說(shuō)，它的思想是汉柒，每一個(gè)異步任務(wù)返回一個(gè)Promise對(duì)象误褪，該對(duì)象有一個(gè)then方法，允許指定回調(diào)函數(shù)碾褂。使用Promise對(duì)象可以用同步操作的流程寫法來(lái)表達(dá)異步操作兽间，避免了層層嵌套的異步回調(diào)，代碼也更加清晰易懂正塌，方便維護(hù)嘀略，也可以捕捉異常。
??promise模式在任何時(shí)刻都處于以下三種狀態(tài)之一：未完成（unfulfilled）乓诽、已完成（resolved）和拒絕（rejected）帜羊。以CommonJS Promise/A 標(biāo)準(zhǔn)為例，promise對(duì)象上的then方法負(fù)責(zé)添加針對(duì)已完成和拒絕狀態(tài)下的處理函數(shù)鸠天。then方法會(huì)返回另一個(gè)promise對(duì)象讼育，以便于形成promise管道，這種返回promise對(duì)象的方式能夠支持開發(fā)人員把異步操作串聯(lián)起來(lái)稠集，如then(resolvedHandler, rejectedHandler); 奶段。resolvedHandler 回調(diào)函數(shù)在promise對(duì)象進(jìn)入完成狀態(tài)時(shí)會(huì)觸發(fā)，并傳遞結(jié)果剥纷；rejectedHandler函數(shù)會(huì)在拒絕狀態(tài)下調(diào)用痹籍。
??Jquery在1.5的版本中引入了一個(gè)新的概念叫Deferred，就是CommonJS promise A標(biāo)準(zhǔn)的一種衍生晦鞋《撞可以在jQuery中創(chuàng)建
$.Deferref的對(duì)象。同時(shí)也對(duì)發(fā)送ajax請(qǐng)求以及數(shù)據(jù)類型有了新的修改悠垛，參考JQuery API线定。
??簡(jiǎn)單說(shuō)，它的思想是鼎文，每一個(gè)異步任務(wù)返回一個(gè)Promise對(duì)象，該對(duì)象有一個(gè)then方法因俐，允許指定回調(diào)函數(shù)拇惋。比如周偎，f1的回調(diào)函數(shù)f2,可以寫成：

f1().then(f2);

f1要進(jìn)行如下改寫:

　function f1(){
　　　　var dfd = $.Deferred();
　　　　setTimeout(function () {
　　　　　　// f1的任務(wù)代碼
　　　　　　dfd.resolve();
　　　　}, 500);
　　　　return dfd.promise;
　　}

這樣寫的優(yōu)點(diǎn)在于，回調(diào)函數(shù)變成了鏈?zhǔn)綄懛ǔ盘绦虻牧鞒炭梢钥吹煤芮宄乜玻矣幸徽椎?a target="_blank" rel="nofollow">配套方法，可以實(shí)現(xiàn)許多強(qiáng)大的功能胡嘿。

比如蛉艾，指定多個(gè)回調(diào)函數(shù)：

　　f1().then(f2).then(f3);

再比如，指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)：

　　f1().then(f2).fail(f3);

而且衷敌，它還有一個(gè)前面三種方法都沒(méi)有的好處：如果一個(gè)任務(wù)已經(jīng)完成勿侯，再添加回調(diào)函數(shù)，該回調(diào)函數(shù)會(huì)立即執(zhí)行缴罗。所以助琐，你不用擔(dān)心是否錯(cuò)過(guò)了某個(gè)事件或信號(hào)。這種方法的缺點(diǎn)就是編寫和理解面氓，都相對(duì)比較難兵钮。

• 在ES 6中原生提供了Promise對(duì)象，Promise對(duì)象代表了某個(gè)未來(lái)才會(huì)知道結(jié)果的事件(一般是一個(gè)異步操作)舌界，并且這個(gè)事件對(duì)外提供了統(tǒng)一的API掘譬，可供進(jìn)一步處理。

Promise 對(duì)象有以下兩個(gè)特點(diǎn)：
1）呻拌、對(duì)象的狀態(tài)不受外界影響葱轩。Promise 對(duì)象代表一個(gè)異步操作，有三種狀態(tài)：Pending（進(jìn)行中）柏锄、Resolved（已完成酿箭，又稱 Fulfilled）和 Rejected（已失敗）趾娃。只有異步操作的結(jié)果缭嫡，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無(wú)法改變這個(gè)狀態(tài)抬闷。這也是 Promise 這個(gè)名字的由來(lái)妇蛀，它的英語(yǔ)意思就是「承諾」，表示其他手段無(wú)法改變笤成。

2）评架、一旦狀態(tài)改變，就不會(huì)再變炕泳，任何時(shí)候都可以得到這個(gè)結(jié)果纵诞。Promise 對(duì)象的狀態(tài)改變，只有兩種可能：從 Pending 變?yōu)?Resolved 和從 Pending 變?yōu)?Rejected培遵。只要這兩種情況發(fā)生浙芙，狀態(tài)就凝固了登刺，不會(huì)再變了，會(huì)一直保持這個(gè)結(jié)果嗡呼。就算改變已經(jīng)發(fā)生了纸俭，你再對(duì) Promise 對(duì)象添加回調(diào)函數(shù)，也會(huì)立即得到這個(gè)結(jié)果南窗。這與事件（Event）完全不同揍很，事件的特點(diǎn)是，如果你錯(cuò)過(guò)了它万伤，再去監(jiān)聽窒悔，是得不到結(jié)果的。

??有了 Promise 對(duì)象壕翩，就可以將異步操作以同步操作的流程表達(dá)出來(lái)蛉迹，避免了層層嵌套的回調(diào)函數(shù)。此外放妈，Promise 對(duì)象提供統(tǒng)一的接口北救，使得控制異步操作更加容易。

??Promise 也有一些缺點(diǎn)芜抒。首先珍策，無(wú)法取消 Promise，一旦新建它就會(huì)立即執(zhí)行宅倒，無(wú)法中途取消攘宙。其次，如果不設(shè)置回調(diào)函數(shù)拐迁，Promise 內(nèi)部拋出的錯(cuò)誤蹭劈，不會(huì)反應(yīng)到外部。第三线召，當(dāng)處于 Pending 狀態(tài)時(shí)铺韧，無(wú)法得知目前進(jìn)展到哪一個(gè)階段（剛剛開始還是即將完成）。

一個(gè)簡(jiǎn)單的demo：

function fn(num) {
  var promise = new Promise(function(resolve, reject) {
     if (/* 異步操作成功 */){
       resolve(value);
     } else {
       reject(error);
   }
});

promise.then(function(value) {
 // success
}, function(value) {
 // failure
});

??Promise 構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)缓淹，該函數(shù)的兩個(gè)參數(shù)分別是 resolve 方法和 reject 方法哈打。

??如果異步操作成功，則用 resolve 方法將 Promise 對(duì)象的狀態(tài)讯壶，從「未完成」變?yōu)椤赋晒Α梗磸?pending 變?yōu)?resolved）料仗；

??如果異步操作失敗，則用 reject 方法將 Promise 對(duì)象的狀態(tài)伏蚊，從「未完成」變?yōu)椤甘　梗磸?pending 變?yōu)?rejected）立轧。

promise 基本的 api

1.Promise.resolve()
2.Promise.reject()
3.Promise.prototype.then()
4.Promise.prototype.catch()
5.Promise.all() // 所有的完成

 var p = Promise.all([p1,p2,p3]);

6.Promise.race() // 競(jìng)速，完成一個(gè)即可

參考：
http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then