promise 基礎(chǔ)版（雛形）

羅志環(huán) 發(fā)布于2019-08-26 11:31 / 2613人閱讀

摘要：以下方式寫提示未定義涉及閉包作用域鏈的問題改進(jìn)方式調(diào)用實例化回調(diào)函數(shù)執(zhí)行成功，并執(zhí)行函數(shù)，此時在回調(diào)隊列里面添加一一個函數(shù)，并將的參數(shù)傳遞出去。否則直接執(zhí)行回調(diào)函數(shù)，不會由來觸發(fā)的回調(diào)函數(shù)執(zhí)行。

function Promise(fn){
    //需要一個成功時的回調(diào)
    var self = this
    var callback;
    //一個實例的方法，用來注冊異步事件
    self.then = function(done){
      callback = done;
    }
    // resolve 比 then 先執(zhí)行 此時 callback 不存在
    // 所以 加一個 setTimeout 讓resolve 函數(shù)在回調(diào)隊列的末尾
    // 為啥是0秒？ 為啥處于回調(diào)隊列末尾？
    //（權(quán)威指南）如果以0毫秒的超時時間來調(diào)用setTimeout(),那么指定的函數(shù)不會立即執(zhí)
    // 行，相反會把它放到隊列中去，等到前面處于等待狀態(tài)的事件處理程序全部執(zhí)行完成后，
    // 再“立即”調(diào)用它。
    // 以下 方式寫 提示 resolve 未定義 涉及閉包 作用域鏈的問題
    // setTimeout(function () {
    //   function resolve(value){
    //      callback && callback(value);
    //   }
    // }, 0)
    
    // 改進(jìn)方式
    function resolve (value) {
      setTimeout(function () {
        callback && callback(value)
      }, 0)
    }
    fn(resolve);
  }

調(diào)用promise

 // 實例化promise 回調(diào)函數(shù)fn執(zhí)行成功，并執(zhí)行resolve函數(shù)，此時在回調(diào)隊列里面添加一
 // 一個callback函數(shù)，并將resolve的參數(shù)傳遞出去。
 var promise = new Promise(function (resolve) {
    resolve(["3", "aaa"])
 })
// 調(diào)用then函數(shù)，并執(zhí)行then回調(diào)，將then函數(shù)的參數(shù)done回調(diào)函數(shù)賦值給callback，
// 在回調(diào)隊列里面（之前setTimeout添加進(jìn)去的回調(diào)隊列）執(zhí)行then的回調(diào)函數(shù)
 promise.then(function (data) {
    console.log("data", data)
 })

但是以上方式寫，我們永遠(yuǎn)都只能執(zhí)行then中一個回調(diào)隊列，這顯然不健壯。我們結(jié)合js設(shè)計模式的發(fā)布--消息訂閱模式，再結(jié)合構(gòu)造函數(shù)return this 知識點，稍微改造下：

function Promise(fn){
    //需要一個成功時的回調(diào)
    var self = this
    self.deferreds = []; // then函數(shù) 回調(diào)隊列 儲存容器
    //一個實例的方法，用來注冊異步事件
    self.then = function(onFulfilled){
      self.deferreds.push(onFulfilled)
      console.log("self.deferreds", self.deferreds) 
      // 調(diào)用兩次then 回調(diào)隊列會逐個push
      return self // 鏈?zhǔn)秸{(diào)用then
    }

    // 改進(jìn)方式
    function resolve (value) {
      setTimeout(function () {
        self.deferreds.forEach(function (deferred) {
           deferred && deferred(value)
        })
      }, 0)
    }
    fn(resolve);
}

調(diào)用then函數(shù)：

promise.then(function (data) {
    console.log("data", data)
}).then(function (resp) {
    console.log("resp", resp)
})

眾所周知，構(gòu)造函數(shù)Promise存在三個互斥狀態(tài)：pending、fulfilled、rejected。Promise 對象的狀態(tài)改變，只有兩種可能：從 pending 變?yōu)?fulfilled 和從 pending 變?yōu)?rejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會再變了，會一直保持這個結(jié)果。

所以：我們改進(jìn)代碼如下：

//略
// 初始化設(shè)置狀態(tài)
self.status = "pending"
//略
// ...
//略
// resolve的時候 將狀態(tài)置為
self.status = "fulfilled"
//略

調(diào)用執(zhí)行，同樣可以得到我們想要的數(shù)據(jù)。
但是
但是
但是
僅僅加上上面兩行代碼是不行的，仔細(xì)理解加粗的那幾個字，再結(jié)合我們的代碼來看。
當(dāng)我們調(diào)用then函數(shù)的時候，往我們then回調(diào)隊列里面push回調(diào)函數(shù)，最終不管狀態(tài)是pending
還是fulfilled，回調(diào)隊列的函數(shù)都是被resolve函數(shù)觸發(fā)的。這樣就違背了這句話：只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會再變了，會一直保持這個結(jié)果。
當(dāng)我們狀態(tài)改變?yōu)閒ulfilled,我們并沒有真正改變狀態(tài)，每次再重新執(zhí)行的時候，我們又重新走了一次then添加回調(diào)，然后由resolve來觸發(fā)回調(diào)的過程。
所以then函數(shù)改進(jìn)代碼如下：

// 當(dāng)status == "pending"的時候，我們才往then的回調(diào)隊列push回調(diào)函數(shù)。
// 否則 直接執(zhí)行回調(diào)函數(shù)，不會由resolve來觸發(fā)then的回調(diào)函數(shù)執(zhí)行。
if(self.status == "pending") {
  self.deferreds.push(onFulfilled)
  return self
}
onFulfilled(value)
return self // 鏈?zhǔn)秸{(diào)用then

所以加入value后，最終代碼如下：
基本就實現(xiàn)了鏈?zhǔn)秸{(diào)用then的一個帶有pending 和 fulfilled 狀態(tài)的Promise
后續(xù)會加上reject(), rejected以及最難理解的串行promise。

function Promise(fn){
    //需要一個成功時的回調(diào)
    var self = this
    self.deferreds = []; // then函數(shù) 回調(diào)隊列 儲存容器
    self.status = "pending"
    self.value = null
    //一個實例的方法，用來注冊異步事件
    self.then = function(onFulfilled){
      if(self.status == "pending") {
        self.deferreds.push(onFulfilled)
        return self
      }
      onFulfilled(self.value)
      return self // 鏈?zhǔn)秸{(diào)用then
    }

    // 改進(jìn)方式
    function resolve (newValue) {
      setTimeout(function () {
        self.value = newValue
        self.status = "fulfilled"
        self.deferreds.forEach(function (deferred) {
           deferred && deferred(self.value)
        })
      }, 0)
    }
    fn(resolve);
 }

附錄參考文獻(xiàn)

美團(tuán)點評

cn博客

云服務(wù)器 GPU云服務(wù)器雛形商業(yè)基礎(chǔ)版虛擬機(jī)基礎(chǔ)版 datav基礎(chǔ)版

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107055.html

發(fā)表評論

登陸后可評論

0條評論

羅志環(huán)

男|高級講師

我要關(guān)注我要私信

TA的文章

云虛擬主機(jī)如何清除數(shù)據(jù)-如何清理虛擬主機(jī)的垃圾文件？

閱讀 2238·2021-09-22 15:25
怎樣打造一個DOM元素位置引擎 (一)

閱讀 3619·2019-08-30 12:48
position定位有哪些？各有什么特點？

閱讀 2209·2019-08-30 11:25
vue 核心之一計算屬性computed 和偵聽屬性watch

閱讀 2340·2019-08-30 11:05
圖片自適應(yīng)

閱讀 728·2019-08-29 17:28
React 學(xué)習(xí)之路（四） state & 生命周期

閱讀 3291·2019-08-26 12:16
promise 基礎(chǔ)版（雛形）

閱讀 2614·2019-08-26 11:31
一名【合格】前端工程師的自檢清單

閱讀 1712·2019-08-23 17:08

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

promise 基礎(chǔ)版（雛形）

相關(guān)文章

我了解到的JavaScript異步編程

**30分鐘，讓你徹底明白Promise原理**

Build Your Own Promise

Promise原理分析一

基于vue-cli3.0的項目工程重新構(gòu)建空白版，拿來即用

發(fā)表評論

0條評論

羅志環(huán)

男|高級講師

TA的文章

云虛擬主機(jī)如何清除數(shù)據(jù)-如何清理虛擬主機(jī)的垃圾文件？

怎樣打造一個DOM元素位置引擎 (一)

position定位有哪些？各有什么特點？

vue 核心之一計算屬性computed 和偵聽屬性watch

圖片自適應(yīng)

React 學(xué)習(xí)之路（四） state & 生命周期