Promise (2) 原型上的方法


"I'm Captain Jack Sparrow"

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

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

 2 Promise基本方法簡介

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

從圖中結構看,Promise構造函數上實現了all,race,reject,resolve。Promise構造函數的原型上實現了then,catch的方法。構造函數原型上實現then,catch的方法是為了讓Promise構造函數創建的 實例 共享then,catch方法。(此處提一下,實例和構造函數原型之間存在連接,並不是與構造函數存在連接。對構造函數原型和構造函數,實例之間的關系不理解可以看看《javascript高級程序設計》第六章)。 在Promise構造函數上實現的all,race,reject,resolve,不能在對象的實例中訪問,屬於Promise構造函數自己,這樣做保證了對象的命名空間整潔。所以這幾個函數的調用方式是Promise.all(),Promise.race(),Promise.reject(),Promise.resolve()。

Promise簡體實現結構大概是:

//Promise構造函數實現的大概結構
function Promise(resolver) {
    //promise 的初始狀態
    this._PromiseStatus = 'pending';
    //promise 的value 值(不同實現這個屬性名字不一樣)
    this._PromiseValue = undefined
    //......接下來要實現的此處省略
}

//給Promise添加方法
Promise.all = all;
Promise.race = race;
Promise.resolve = resolve;
Promise.reject = reject;

//重寫Promise構造函數原型
Promise.prototype = {
    constructor: Promise,
    then: then,
    catch: catch
};

//方法具體實現
function all( /***/ ) {

}
// ......方法實現省略

使用new 操作符創建 promise對象實際經歷的步驟:(這個摘抄自《javascript高級程序設計》,好書值得多讀幾遍)

  1.創建了一個新的對象。
  2.將構造函數的作用域賦給新對象(因此this就指向了這個新的對象)。
  3.執行構造函數代碼(為這個新對象添加屬性)。
  4.返回新對象。

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

總結:then,catch方法是供Promise構造函數創建的 實例調用的,all,race,reject,resolve是Promise構造函數自己調用的。(這句描述不是很標准)

 2.1 Promise.prototype.then

⑴.為什么promise對象需要狀態?

var testPromiseStatus = new Promise(function(resolve, reject) {
  //異步操作......成功后執行了resolve(1)
  getdata((data) => {
    resolve(data);
  })
})


setTimeout(() => {
  //從創建了testPromiseStatus,在到執行testPromiseStatus.then中間的時間間隔不確定
  testPromiseStatus.then(function onFulfilled(value) {
    console.log("我到底應該什么時候執行呀?");
  })
},一個不確定的時間)

需要一個狀態位去標志,testPromiseStatus 的狀態,

如果在執行testPromiseStatus.then()時promise的狀態是pedding,將 onFulfilled存起來 等到promise狀態變成fulfilled的時候執行。

如果 testPromiseStatus.then()時promise的狀態是fulfilled,直接執行onFulfilled函數。

參考es6-promise的源碼,會發現它的實現是將回調函數放進一個數組隊列(意味着隊列里面不一定只有一個函數等待被執行),然后如果promise對象狀態不為pending狀態,就按順序執行這個 數組隊列里面的回調函數,如果promise對象為pending狀態,就是等待promise對象狀態遷移后再執行這個數組隊列。

  • 如果promise對象狀態不為pending狀態

  • 如果promise對象為pending狀態,就是等待promise對象狀態遷移后再執行這個數組隊列

 ⑵.為什么Promise.prototype.then執行它會返回一個新的promise對象?

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

返回新的promise對象的原因是為了鏈式操作,使得能以taskA → task B 這種流程進行邏輯處理。即aPromise.then()執行完,返回一個新promise b對象,接着執行新promise b對象的then方法,為什么是新的promise對象?因為promise對象需要自己的狀態[[PromiseStatus]]值(記錄自己的狀態)(用來判定是執行then傳遞的函數,還是等待promise狀態遷移后,再執行then里面的函數),每一個還需要自己的 [[PromiseValue]] 值(記錄自己的值,promise狀態遷移后,.then的函數每一次調用得到的參數data一致)。所以需要返回一個新的promise對象。

 ⑶.thenable對象是個啥?

  類Promise對象,thenable對象擁有名為then方法的對象。所擁有的 then 方法應該和Promise所擁有的 then 方法具有同樣的功能和處理過程。then 調用的回調函數 retuen 一個普通的thenable對象,會先執行thenable對象的then方法,根據then方法內部執行resolve或reject確定[[PromiseValue]]和[[PromiseStatus]],然后將值賦給新的promise對象。可以在控制台執行下圖代碼。

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);
})

總結:Promise的狀態是為了解決then方法傳遞的回調是等待被執行(函數隊列),還是立即執行(函數隊列)。Promise的鏈式操作的需求和每一個promise對象都需要自己的狀態,讓then方法返回的總是一個新的promise對象。

then方法執行的回調函數執行return 值(參考至Promises/A+這篇是翻譯,個人覺得很棒【翻譯】Promises/A+規范,建議文章很簡短值得一看

①var aPromise = new Promise(function(){ resolve(1)}); var testPromise = aPromise.then(null,null)//沒有回調函數,新創建的testPromise 對象的[[PromiseStatus]]和[[PromiseValue]]與之前的aPromise 的一樣。

②then方法執行的回調函數執行return 值只為普通對象或者原始類型,即將值賦給新創建的promise對象[[PromiseValue]],新創建的promise對象的[[PromiseStatus]]就等於調用then的那個promise對象的[[PromiseStatus]]。

③then方法執行的回調函數執行return值為promise對象,即將promise對象的[[PromiseValue]]和[[PromiseStatus]]賦值給新創建的promise對象對應屬性值。

then方法執行的回調函數執行return值為thenable對象,即執行對象的then方法,根據then方法內部執行resolve或reject確定[[PromiseValue]]和[[PromiseStatus]],賦值給新創建的promise對象對應屬性值。

 2.2 Promise.prototype.catch

  Promise.prototype.catch 只是 promise.prototype.then(undefined, onRejected)方法的一個別名而已。 也就是說,這個方法用來注冊當promise對象狀態變為Rejected時的回調函數。摘抄至--《javascript Promise迷離書》

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

⑴.調用catch 干什么?

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)
})

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

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

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

 ⑵.catch調用后也會產生新的promise

 

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

對了catch的err來源於上一個Preomise的[[PromiseValue]]值看下圖代碼。

var haha = {
            'xiaobu': 2017,
            'data': '6/13'
        }

var testC = new Promise(function(resolve, reject) {
        reject(haha);
    })
    // 此處判定
testC.catch(e => {
    console.log(e === haha)
})

此處可以在控制台輸出true 和 testC,發現testC[[PromiseValue]]值與haha相等。

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

 2.3 總結

 "I'm Captain Jack Sparrow"

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

Promise.prototype.catch和promise.prototype.then 是需要認真理解的方法。理解Promise的狀態,理解then方法調用會返回新的promise對象等等。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM