此文章主要講解核心思想和基本用法，想要了解更多細(xì)節(jié)全面的使用方式，請閱讀官方API

　　這篇文章假定你具備最基本的異步編程知識(shí)，例如知道什么是回調(diào)，知道什么是鏈?zhǔn)秸{(diào)用，同時(shí)具備最基本的單詞量，例如page、user、promise、then、resovle、reject、pay、fix、order等等，如果你對這些單詞非常陌生，那么你需要先花點(diǎn)時(shí)間補(bǔ)充一下你的英語。

　　什么是異步操作?

　　所謂異步操作，指的是可以跟當(dāng)前程序同時(shí)執(zhí)行的操作。舉例:

　　$("#page").scrolltop(0 ,1000); //使用1秒鐘時(shí)間將頁面滾動(dòng)至頂部

　　$("#nav-float").hide (1000); //使用1秒鐘時(shí)間將懸浮導(dǎo)航欄隱藏

　　只要你稍微有點(diǎn)異步編程經(jīng)驗(yàn)，就應(yīng)該知道，這兩個(gè)方法會(huì)同時(shí)完成。

　　它們的編寫順序并不會(huì)影響它們的執(zhí)行順序

　　//異步操作的特點(diǎn)就是，不會(huì)打斷當(dāng)前程序的執(zhí)行

　　//getUsers請求發(fā)出后，會(huì)立刻向下繼續(xù)執(zhí)行第二個(gè)請求

　　ajax("/getUsers",function(data) {

　　//回掉函數(shù)會(huì)在請求成功后調(diào)用

　　})

　　//resumelist請求會(huì)立刻開始，無論getUsers是否結(jié)束

　　ajax("/resumelist", function(data) {

　　})

　　//至于哪一個(gè)ajax先返回結(jié)果并執(zhí)行回調(diào)函數(shù)，從代碼的編寫順序上是無法確定的。

　　我們可以給異步操作做一個(gè)簡單的定義

　　當(dāng)一個(gè)操作開始執(zhí)行后，主程序無需等待它的完成，可以繼續(xù)向下執(zhí)行。此時(shí)該操作可以跟主程序同時(shí)(并發(fā))執(zhí)行。這種操作我們就稱之為異步操作。 通常當(dāng)操作完成時(shí)，會(huì)執(zhí)行一個(gè)我們事先設(shè)定好的回調(diào)函數(shù)來做后續(xù)的處理。

　　我們常見的異步操作例如：

　　· 添加定時(shí)器 setTimeout/setInterval

　　· 執(zhí)行某個(gè)動(dòng)畫 animate

　　· 發(fā)起網(wǎng)絡(luò)請求 request

　　異步會(huì)帶來什么問題?

　　比如我們現(xiàn)在有兩個(gè)動(dòng)畫，需要按順序來執(zhí)行，也就是第一個(gè)結(jié)束，第二個(gè)才能開始

　　這個(gè)時(shí)候可能有點(diǎn)麻煩，傳統(tǒng)的解決方法是通過回調(diào)：

　　animateA(function( ){

　　animateB( );

　　})

　　這種方案顯然不太好，如果有很多異步操作需要順序執(zhí)行，就會(huì)產(chǎn)生所謂的“回調(diào)地獄”

　　ajaxA(function( ){

　　ajaxB(function( ){

　　ajaxC(function( ){

　　ajaxD(function( ){

　　......

　　});

　　});

　　});

　　})

　　這種代碼不管是寫起來還是讀起來都比較煩人。

　　我們來看下經(jīng)過Promise改造后的樣子(偽代碼)

　　new Promise(ajaxA)

　　.then(ajaxB)

　　.then(ajaxC)

　　.then(ajaxD);

　　Promise的使用及原理

　　要熟練Promise的的使用，你必須要先搞懂它解決問題的原理

　　貼一段實(shí)際的Promise代碼，你來感受一下先：

　　newPromise(resolve=>{

　　ajax("/pay/post", data=>resolve() );

　　}).then(resolve=>{

　　ajax("/order/fix", data=>{

　　//處理數(shù)據(jù)

　　})

　　})

　　上面的代碼使用了ES6的箭頭函數(shù),雖然大大簡化了代碼的寫法，

　　但對于初級(jí)程序猿來講極不友好

　　讀這種代碼簡直跟讀金剛經(jīng)差不多。

　　我們把代碼還原成ES5的樣子

　　new Promise(function(resolve){

　　ajax("/pay/post",function(data){

　　resolve();

　　})

　　}).then(function(){

　　ajax("/order/fix",function(data){

　　})

　　})

　　接下來，我們就按照費(fèi)曼技巧來一步步的學(xué)習(xí)Promise是如何解決問題的

　　問題1, 作為一個(gè)異步函數(shù)，尤其像ajax這種網(wǎng)絡(luò)請求，連我自己都不能確定函數(shù)的執(zhí)行時(shí)間，Promise是怎么知道第一個(gè)函數(shù)什么時(shí)候結(jié)束的? 然后再開始執(zhí)行下一個(gè)?

　　Promise并沒有那么神奇，它并不能知道我們的函數(shù)什么時(shí)候結(jié)束，

　　你注意到上面代碼中的第3行了嗎

　　在ajax請求結(jié)束執(zhí)行回調(diào)的時(shí)候，

　　我們調(diào)用了一個(gè)resolve()函數(shù)，這句代碼非常的關(guān)鍵.

　　這其實(shí)就是在通知Promise，當(dāng)前這個(gè)函數(shù)結(jié)束啦，

　　你可以開始執(zhí)行下一個(gè)。 這時(shí)Promise就會(huì)去執(zhí)行then里面的函數(shù)了。

　　問題2, 所以按照你的意思，如果我不調(diào)用這個(gè)方法，Promise就不知道這個(gè)函數(shù)有沒有結(jié)束，那么then里面的函數(shù)就不會(huì)執(zhí)行，也就是說我的第二個(gè)請求就永遠(yuǎn)不會(huì)發(fā)送了唄?

　　Bingo!! 恭喜你已經(jīng)學(xué)會(huì)了邏輯推理+搶答。

　　問題3, 可是這個(gè)resolve函數(shù)是從哪來的? 需要我自己定義嗎? 從代碼上看它好像是個(gè)參數(shù)，那又是誰傳入函數(shù)中的?

　　你得先弄明白Promise的基本結(jié)構(gòu)

　　new Promise(函數(shù)1).then(函數(shù)2);

　　我們把函數(shù)1和函數(shù)2都以參數(shù)形式傳給了一個(gè)Promise對象，

　　所以接下來函數(shù)1和2都會(huì)由這個(gè)Promise對象控制，

　　簡單的說，函數(shù)1和函數(shù)2都會(huì)由Promise對象來執(zhí)行。

　　所以在函數(shù)1執(zhí)行時(shí)，參數(shù)也當(dāng)然是由Promise對象傳遞進(jìn)去的。

　　new Promise(function(resolve){

　　//resolve是Promise對象在調(diào)用函數(shù)時(shí)傳入的參數(shù)

　　}).then(函數(shù)2);

　　問題4, Promise對象為啥要在執(zhí)行第1個(gè)任務(wù)的時(shí)候，把這個(gè)resolve函數(shù) 傳進(jìn)來，有什么目的?

　　Promise對象沒辦法知道我們的異步函數(shù)啥時(shí)候結(jié)束。

　　那我來問你， 如果你去車站接人，

　　可是你又不知道對方何時(shí)下車，你會(huì)咋辦?

　　把我電話號(hào)碼給他，快到了打我電話唄

　　沒錯(cuò)，Promise解決問題也采用了同樣的思路。

　　它傳進(jìn)來的resolve函數(shù)， 就好像一個(gè)對講機(jī)，

　　當(dāng)我們的異步任務(wù)要結(jié)束時(shí)，通過對講機(jī) 來通知Promise對象。

　　也就是調(diào)用resolve方法

　　new Promise(function(resolve){

　　ajax("/pay/post",function(data){

　　//當(dāng)請求結(jié)束時(shí)，通過調(diào)用resolve方法，通知Promise對象，該任務(wù)已完成

　　resolve(); //收到通知后，Promise會(huì)立刻開始函數(shù)2的執(zhí)行

　　})

　　}).then(函數(shù)2);

　　懂了，所以這個(gè)resolve函數(shù)，必須在異步任務(wù)的最后調(diào)用(例如ajax的回調(diào)方法)，相當(dāng)于告訴Promise對象，該任務(wù)結(jié)束，請開始下一個(gè)。

　　完全正確

　　問題5, 所以Promise也不過如此嘛，它沒有帶來什么功能上的革命性變化， 因?yàn)槭褂脗鹘y(tǒng)的回調(diào)嵌套的方式，同樣可以完成效果。 說白了它就是編碼方式上的改進(jìn)??

　　基本是這樣的，但Promise帶來的編碼方式以及異步編程思路上的進(jìn)步是非常巨大的。

　　問題6, 那如果我有ajaxA、ajaxB、ajaxC三個(gè)異步任務(wù)，想按照先A后B再C的順序執(zhí)行，像這樣寫行嗎?

　　new Promise(function(resolve){

　　ajax("/AAA", function(){

　　resolve(); //通知Promise該任務(wù)結(jié)束

　　})

　　}).then(function(resolve){

　　ajax("/BBB", function(){

　　resolve();//通知Promise該任務(wù)結(jié)束

　　})

　　}).then(function(){

　　ajax("/CCC", function(){ //.... })

　　})

　　上面的這種寫法是不對的。

　　Promise的中文含義是“承諾”，

　　則意味著，每一個(gè)Pormise對象，代表一次承諾

　　而每一次承諾，只能保證一個(gè)任務(wù)的順序，也就是說

　　new Promise(A).then(B); 這句話表示， 只能保證A和B的順序

　　一旦A執(zhí)行完，B開始后，這次承諾也就兌現(xiàn)了，Promise對象也就失效了

　　那如果還有C呢? 我們就必須在函數(shù)B中，

　　重新創(chuàng)建新的Promise對象，來完成下一個(gè)承諾，具體的寫法就像這樣：

　　new Promise(函數(shù)1(resolve){

　　ajaxA("xxxx", function(){

　　resolve();//通知Promise該任務(wù)結(jié)束

　　})

　　}).then(函數(shù)2(){

　　//在函數(shù)2開始運(yùn)行后，第一次創(chuàng)建的Promise對象完成使命，已經(jīng)不能再繼續(xù)工作。

　　//此時(shí)，我們創(chuàng)建并返回了新的Promise對象

　　return new Promise(function(resolve){

　　ajaxB("xxxx", function(){

　　resolve();//通知新的Promise對象該任務(wù)結(jié)束

　　})

　　})

　　}).then(函數(shù)3(){ //盡管這里使用了鏈?zhǔn)秸{(diào)用，但負(fù)責(zé)執(zhí)行函數(shù)3的，已經(jīng)是新的Promise對象了

　　// 如果，我們還有ajaxD需要順序調(diào)用

　　// 那就必須在這里重新new Promise()對象了

　　ajaxC("xxx", function(){ })

　　})

　　問題7, 懂了，那Promise還有什么其它強(qiáng)大的功能嗎?

　　有啊，例如： 如果我有 A,B,C 三個(gè)異步任務(wù)，ABC同時(shí)開始執(zhí)行

　　當(dāng)A,B,C三個(gè)任務(wù)全部都結(jié)束時(shí)，執(zhí)任務(wù)D，

　　傳統(tǒng)方法實(shí)現(xiàn)起來就比較復(fù)雜，Promise就非常簡單，就像這樣：

　　Promise.all([new Promise(A), new Promise(B), new Promise(C)])

　　.then(function(){

　　D();

　　});

　　問題8, 那如果我希望A,B,C 其中任意一個(gè)任務(wù)完成，

　　就馬上開始任務(wù)D，該怎么做?

　　Promise.race([new Promise(A), new Promise(B), new Promise(C)])

　　.then(function(){

　　D();

　　});

　　恭喜你，在這么短的時(shí)間內(nèi)學(xué)會(huì)了Promise