"I'm Captain Jack Sparrow"

加勒比海盜5上映，為了表示對杰克船長的喜愛，昨天閃現(xiàn)了幾次模仿船長的走路姿勢（哈哈哈，簡直妖嬈）。

為了周天能去看電影，要趕緊做完手上的活兒，比如總結(jié)Promise的方法。

 2 Promise基本方法簡介

Promise提供了哪些方法了？大招就是放圖在控制臺輸出Promise。

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

從圖中結(jié)構(gòu)看，Promise構(gòu)造函數(shù)上實現(xiàn)了all,race,reject,resolve。Promise構(gòu)造函數(shù)的原型上實現(xiàn)了then，catch的方法。在構(gòu)造函數(shù)原型上實現(xiàn)then，catch的方法是為了讓Promise構(gòu)造函數(shù)創(chuàng)建的 實例 共享then，catch方法。（此處提一下，實例和構(gòu)造函數(shù)原型之間存在連接，并不是與構(gòu)造函數(shù)存在連接。對構(gòu)造函數(shù)原型和構(gòu)造函數(shù)，實例之間的關(guān)系不理解可以看看《javascript高級程序設(shè)計》第六章）。 在Promise構(gòu)造函數(shù)上實現(xiàn)的all，race，reject，resolve，不能在對象的實例中訪問，屬于Promise構(gòu)造函數(shù)自己，這樣做保證了對象的命名空間整潔。所以這幾個函數(shù)的調(diào)用方式是Promise.all()，Promise.race()，Promise.reject()，Promise.resolve()。

Promise簡體實現(xiàn)結(jié)構(gòu)大概是：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

//Promise構(gòu)造函數(shù)實現(xiàn)的大概結(jié)構(gòu)function Promise(resolver) {    //promise 的初始狀態(tài)
    this._PromiseStatus = 'pending';    //promise 的value 值（不同實現(xiàn)這個屬性名字不一樣）
    this._PromiseValue = undefined    //......接下來要實現(xiàn)的此處省略}//給Promise添加方法Promise.all = all;
Promise.race = race;
Promise.resolve = resolve;
Promise.reject = reject;//重寫Promise構(gòu)造函數(shù)原型Promise.prototype = {
    constructor: Promise,
    then: then,    catch: catch};//方法具體實現(xiàn)function all( /***/ ) {

}// ......方法實現(xiàn)省略

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

使用new 操作符創(chuàng)建 promise對象實際經(jīng)歷的步驟：（這個摘抄自《javascript高級程序設(shè)計》，好書值得多讀幾遍）

　　1.創(chuàng)建了一個新的對象。
　　2.將構(gòu)造函數(shù)的作用域賦給新對象（因此this就指向了這個新的對象）。
　　3.執(zhí)行構(gòu)造函數(shù)代碼（為這個新對象添加屬性）。
　　4.返回新對象。

第三條加粗了可以解釋為什么all，race，reject，resolve，不能在對象的實例中訪問。all,race,reject,resolve并沒有在構(gòu)造函數(shù)中賦值給新對象的屬性。

總結(jié)：then，catch方法是供Promise構(gòu)造函數(shù)創(chuàng)建的 實例調(diào)用的，all，race，reject，resolve是Promise構(gòu)造函數(shù)自己調(diào)用的。(這句描述不是很標(biāo)準(zhǔn))

 2.1 Promise.prototype.then

⑴.為什么promise對象需要狀態(tài)？(說不清楚就放圖)

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

var testPromiseStatus = new Promise(function(resolve, reject) {    //異步操作......成功后執(zhí)行了resolve(1)
    resolve(1);
})//從創(chuàng)建了testPromiseStatus,在到執(zhí)行testPromiseStatus.then中間的時間間隔不確定testPromiseStatus.then(function onFulfilled(value) {
    console.log("我到底應(yīng)該什么時候執(zhí)行呀？");
})//resolver 是你傳遞給Promise構(gòu)造函數(shù)的參數(shù)function Promise(resolver) {
    resolver(function resolvePromise(value) {
        _resolve( /*......*/ , value);
    }, function rejectPromise(reason) {
        _reject( /*......*/ , reason);
    });
}

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

Promise處理了異步操作的結(jié)果，并提供了規(guī)范的接口讓你與之交互（理解Promise的由來）。

回到看上圖代碼，異步操作成功后執(zhí)行了resolve(1)，內(nèi)部就會執(zhí)行resolvePromise來調(diào)用PromiseStatus.then傳遞進(jìn)來處理異步代碼執(zhí)行結(jié)果回調(diào)函數(shù)onFulfilled，意味著Promise構(gòu)造函數(shù)內(nèi)部實現(xiàn)resolvePromise是一個延遲的。因為testPromiseStatus有調(diào)用then傳遞onFulfilled，至少要讓testPromiseStatus.then先執(zhí)行將onFulfilled方法傳遞進(jìn)去后resolvePromise內(nèi)部才能實現(xiàn)執(zhí)行onFulfilled。如果PromiseStatus.then沒有傳遞方法，那么resolvePromise內(nèi)部只需判定有無onFulfilled函數(shù)。簡單的Promise實現(xiàn)，代碼參考自JavaScript Promises ... In Wicked Detail(這篇博文，簡單的去實現(xiàn)了一下Promise)。

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

function sPromise(resolver) {    this.callback = null;    var that = this;

    function resolvePromise(value) {        //此處異步的原因就是為了讓callback先被then設(shè)置，然后再調(diào)用回調(diào)        // giving callback a chance to be set by then()        setTimeout(function() {            //判定此時有沒有回調(diào)
            if (that.callback) {
                that.callback(value);
            }
        }, 0);
    }
    resolver(resolvePromise);
}
sPromise.prototype = {
    constructor: sPromise,
    then: then
};

function then(onFulfilled) {    //此處需要添加一個變量判定是將onFulfilled賦值給變量，等待執(zhí)行    // 還是直接執(zhí)行onFulfilled    //JavaScript Promises ... In Wicked Detail這個博文中指出callback應(yīng)該是一個數(shù)組？可以思考為什么。
    this.callback = onFulfilled
};

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

　　問題來了！！ 如果PromiseStatus已經(jīng)執(zhí)行完resolve，即setTimeout已經(jīng)執(zhí)行完。此時再調(diào)用PromiseStatus.then，then傳遞的回調(diào)就不會再執(zhí)行了所以此時需要給promise對象一個變量標(biāo)識，promise對象內(nèi)部是否已經(jīng)執(zhí)行了resolve這個異步操作，因為如果已經(jīng)執(zhí)行完那么then函數(shù)內(nèi)就直接執(zhí)行傳進(jìn)來的onFulfilled函數(shù)。所以promise對象需要狀態(tài)來標(biāo)識內(nèi)部的變化，狀態(tài)為pending的時候,then里面的回調(diào)onFulfilled就等待異步調(diào)用它，如果狀態(tài)為fulfilled，then里面就直接執(zhí)行回調(diào)函數(shù)fulfilled。

參考es6-promise的源碼，會發(fā)現(xiàn)它的實現(xiàn)是將回調(diào)函數(shù)放進(jìn)一個數(shù)組隊列（意味著隊列里面不一定只有一個函數(shù)等待被執(zhí)行），然后如果promise對象狀態(tài)不為pending狀態(tài)，就按順序執(zhí)行這個 數(shù)組隊列里面的回調(diào)函數(shù)，如果promise對象為pending狀態(tài)，就是等待promise對象狀態(tài)遷移后再執(zhí)行這個數(shù)組隊列。

 ⑵.為什么Promise.prototype.then執(zhí)行它會返回一個新的promise對象？

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

var aPromise = new promise(function(resolve, reject) {
    resolve("test chain");
});
aPromise.then(function taskA(value) {    // task A}).then(function taskB(vaue) {    // task B})

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

返回新的promise對象的原因是為了鏈?zhǔn)讲僮?/strong>，使得能以taskA → task B 這種流程進(jìn)行邏輯處理。即aPromise.then()執(zhí)行完，返回一個新promise對象，接著執(zhí)行新promise對象的then方法，為什么是新的promise對象？因為promise對象需要自己的狀態(tài)[[PromiseStatus]]值，每一個還需要自己的 [[PromiseValue]] 值。所以需要返回一個新的promise對象。

 ⑶.thenable對象是個啥？

　　類Promise對象，thenable對象擁有名為then方法的對象。所擁有的 then 方法應(yīng)該和Promise所擁有的 then 方法具有同樣的功能和處理過程。then 調(diào)用的回調(diào)函數(shù) retuen 一個普通的thenable對象，會先執(zhí)行thenable對象的then方法，根據(jù)then方法內(nèi)部執(zhí)行resolve或reject確定[[PromiseValue]]和[[PromiseStatus]]，然后將值賦給新的promise對象。可以在控制臺執(zhí)行下圖代碼。

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

var thenable = {
    then: function(resolve, reject) {
        console.log("thenable");
        reject("thenable");
    }
};var testPromiseThenable = new Promise(function(resolve, reject) {
    resolve('haha');
}).then(function onFulfilled() {    //返回一個thenable對象
    return (thenable);
})

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

總結(jié)：Promise的狀態(tài)是為了解決then方法傳遞的回調(diào)是等待被執(zhí)行（函數(shù)隊列），還是立即執(zhí)行（函數(shù)隊列）。Promise的鏈?zhǔn)讲僮鞯男枨蠛兔恳粋€promise對象都需要自己的狀態(tài)，讓then方法返回的總是一個新的promise對象。

then方法執(zhí)行的回調(diào)函數(shù)執(zhí)行return 值（參考至Promises/A+）

　?、賤ar promise = Promise.resolve(1); var testPromise = promise.then(null,null)//沒有回調(diào)函數(shù)，新創(chuàng)建的testPromise 對象的[[PromiseStatus]]和[[PromiseValue]]與之前的promise 的一樣。

　?、谥抵粸槠胀▽ο蠡蛘咴碱愋停磳⒅蒂x給新創(chuàng)建的promise對象[[PromiseValue]],新創(chuàng)建的promise對象的[[PromiseStatus]]就等于調(diào)用then的那個promise對象的[[PromiseStatus]]。

　　③值為promise對象，即將promise對象的[[PromiseValue]]和[[PromiseStatus]]，新創(chuàng)建的promise對象對應(yīng)屬性值。

　?、苤禐閠henable對象，即執(zhí)行對象的then方法，根據(jù)then方法內(nèi)部執(zhí)行resolve或reject確定[[PromiseValue]]和[[PromiseStatus]]，給新創(chuàng)建的promise對象對應(yīng)的屬性賦值。

 2.2 Promise.prototype.catch

　　Promise.prototype.catch 只是 promise.prototype.then(undefined, onRejected)方法的一個別名而已。 也就是說，這個方法用來注冊當(dāng)promise對象狀態(tài)變?yōu)镽ejected時的回調(diào)函數(shù)。摘抄至--《javascript Promise迷離書》

promise.prototype.then(onFulfilled, onRejected)中的onRejected是不會處理同級的onFulfilled的函數(shù)的錯誤的，他處理的是前一個promise對象的。傳遞給Promise.prototype.catch 的參數(shù)是一個函數(shù)，這個函數(shù)主要的作用是處理之前的錯誤。

⑴.調(diào)用catch 干什么？

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

var testPromiseMistake = new Promise(function(resolve, reject) {
    reject("testPromiseMistake")
});//使用catch 處理錯誤var rejectPromiseCatch = testPromiseMistake.catch(function onRejected(value) {
        console.log("rejectPromiseCatch:", value)
    })//使用then處理錯誤var rejectPromiseThen = testPromiseMistake.then(null, function onRejected (value) {
    console.log("rejectPromiseThen:", value)
})

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

　　上面用catch和then是等價的。catch就是處理之前的promise拋出的異常。

有的文章中說testMistake.catch是不會執(zhí)行的，因為前面沒有錯誤拋出，會跳過.catch方法。但testMistake.catch它是執(zhí)行了的，下圖代碼中 testMistake  和 testMistakecatch 是不相等的promise對象，可以在控制臺輸出判斷。Promise.prototype.catch 與 promise.prototype.then(undefined, onRejected)方法等價，沒有錯誤時就像執(zhí)行了then但它的回調(diào)函數(shù)onFulfilled為null而已。

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

var testMistake = new Promise(function(resolve, reject) {
    resolve("1")
})var testMistakecatch = testMistake.catch(function(value) {
    console.log("Catch:", value)
})

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

 ⑵.catch調(diào)用后也會產(chǎn)生新的promise

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

 

如圖catch之后還是可以調(diào)用catch或者then方法的。在then函數(shù)中怎么顯示拋出異?；蛘咴赾atch中怎么顯示拋出異常，讓錯誤可以一直傳遞下去？（媽蛋，有錯誤就處理了，還傳遞個毛線呀）這就是后文中提起的Promise.reject();

總結(jié)：清楚Promise.prototype.catch 只是 promise.prototype.then(undefined, onRejected)方法的一個別名，懂then的調(diào)用那么catch也不是什么新方法了。

 2.3 總結(jié)

 "I'm Captain Jack Sparrow"

看完加勒比海盜好幾天，這篇學(xué)習(xí)筆記還是沒寫完。愧疚一把，為了結(jié)束，就總結(jié)為原型上的方法篇吧。

Promise.prototype.catch和promise.prototype.then 是需要認(rèn)真理解的方法。理解Promise的狀態(tài)，理解then方法調(diào)用會返回新的promise對象等等。

ps.  node從7.6版本開始就支持async/await。async/await是一種編寫異步的新方法，可以讓代碼看起來，表現(xiàn)起來更像同步代碼……優(yōu)點一堆值得體驗。（當(dāng)然理解Promise,對理解async/await 是有幫助的）

http://www.cnblogs.com/luoxiaoer/p/6907230.html