山寨一個(gè) Promise

XFLY 發(fā)布于2019-08-26 11:37 / 2722人閱讀

摘要：其次要記錄狀態(tài)，判斷消息是否已被發(fā)布，如果未發(fā)布消息，則通過(guò)來(lái)注冊(cè)回調(diào)時(shí)，是將回調(diào)函數(shù)添加到內(nèi)部的回調(diào)隊(duì)列中如果消息已發(fā)布，則通過(guò)來(lái)注冊(cè)回調(diào)時(shí)，直接將消息傳至回調(diào)函數(shù)，并執(zhí)行規(guī)范中采用的狀態(tài)機(jī)制是可以轉(zhuǎn)化為或，并且只能轉(zhuǎn)化一次。

一點(diǎn)感悟

Promise 是編寫(xiě)異步的另一種方式，鄙人愚見(jiàn)，它就是 Callback 的一種封裝

相比 Callback ，它有以下特點(diǎn)

Promise 將異步結(jié)果保存起來(lái)，可以隨時(shí)獲取

鏈?zhǔn)秸{(diào)用 then 方法會(huì)返回一個(gè)新的 Promise ，從而避免了回調(diào)地獄

決定一次異步有兩個(gè)環(huán)節(jié)

發(fā)起異步事件

處理異步結(jié)果

Promise 可以給一個(gè)異步事件注冊(cè)多個(gè)處理函數(shù)，舉個(gè)栗子，就像這樣

let p1 = new Promise((resolve) => {
  fs.readFile("./test.js", "utf8", (err, data) => {
    resolve(data)
  })
})
p1.then(data => console.log(data))
p1.then(data => console.log(data.toUpperCase()))

用 Callback 實(shí)現(xiàn)一樣的效果

用 callbacks 將所有注冊(cè)的函數(shù)保存

待異步事件返回結(jié)果，再遍歷 callbacks ，依次執(zhí)行所有注冊(cè)的函數(shù)

就像這樣

let callbacks = []
function resolve(data){
  callbacks.forEach(cb => cb(data))
}

fs.readFile("./test.js", "utf8", (err, data) => {
  resolve(data)
})

callbacks.push(data => console.log(data))
callbacks.push(data => console.log(data.toUpperCase()))

將上述代碼封裝一下

const fs = require("fs")

class FakePromise {
  constructor(fn){
      this.callbacks = []
      resolve = resolve.bind(this)
    function resolve(data){
      this.callbacks.forEach(cb => cb(data))
    }
    fn(resolve)
  }
  
  then(onFulfilled){
    this.callbacks.push(onFulfilled)
  }
}

let p1 = new FakePromise(resolve => {
  fs.readFile("./test.js", "utf8", (err, data) => {
    resolve(data)
  })
})
p1.then(data => console.log(data))
p1.then(data => console.log(data.toUpperCase()))

哈？是不是和真的 Promise 有點(diǎn)像

從發(fā)布-訂閱模式的角度來(lái)看：

FakePromise 中通過(guò) .then(onFulfilled) 來(lái)訂閱消息，注冊(cè)處理異步結(jié)果的函數(shù)

通過(guò) resolve(data) 來(lái)發(fā)布消息，觸發(fā)處理異步結(jié)果的函數(shù)去執(zhí)行，發(fā)布的時(shí)機(jī)是異步事件完成時(shí)

延時(shí) resolve

先前的代碼存在一個(gè)問(wèn)題，如果在執(zhí)行 p1.then(data => console.log(data)) 之前，resolve(data) 就已經(jīng)執(zhí)行了，那么再通過(guò) .then(onFulfilled) 注冊(cè)的處理異步結(jié)果的函數(shù)將永遠(yuǎn)不會(huì)執(zhí)行

為了避免這種情況，改造 resolve 函數(shù)，在其內(nèi)部添加 setTimeout，從而保證那些注冊(cè)的處理函數(shù)是在下一個(gè)事件隊(duì)列中執(zhí)行，就像這樣

function resolve(value) {
    setTimeout(() => {
        this.callbacks.forEach(cb => cb(value))
    }, 0)
}

通過(guò)延時(shí)執(zhí)行 resolve 內(nèi)部的函數(shù)，保證了先訂閱消息，再發(fā)布消息

但是 Promise 還有個(gè)額外的功能是在發(fā)布消息后，仍然可以訂閱消息，并且立即執(zhí)行，就像這樣

const fs = require("fs")

let p1 = new Promise(resolve => {
    fs.readFile("./test.js", "utf8", (err, data) => resolve(data))
})

p1.then(data => console.log(data))
setTimeout(function(){
    p1.then(data => console.log(data.toUpperCase()))
}, 5000)

5s之內(nèi)，文件早已讀取成功，但是在5s之后，依然可以通過(guò) .then 注冊(cè)處理事件，并且該事件會(huì)立即執(zhí)行

先發(fā)布，再訂閱

實(shí)現(xiàn)先發(fā)布，再訂閱的基礎(chǔ)是將消息保存下來(lái)。其次要記錄狀態(tài)，判斷消息是否已被發(fā)布，如果未發(fā)布消息，則通過(guò) .then 來(lái)注冊(cè)回調(diào)時(shí)，是將回調(diào)函數(shù)添加到內(nèi)部的回調(diào)隊(duì)列中；如果消息已發(fā)布，則通過(guò) .then 來(lái)注冊(cè)回調(diào)時(shí)，直接將消息傳至回調(diào)函數(shù)，并執(zhí)行

Promise 規(guī)范中采用的狀態(tài)機(jī)制是 pending、fulfilled、rejected

pending 可以轉(zhuǎn)化為 fulfilled 或 rejected ，并且只能轉(zhuǎn)化一次。

轉(zhuǎn)化為 fulfilled 和 rejected 后，狀態(tài)就不可再變

修改代碼如下

class FakePromise {
    constructor(fn) {
        this.value = null
        this.state = "pending"
        this.callbacks = []
        resolve = resolve.bind(this)

        function resolve(value) {
            setTimeout(() => {
                this.value = value
                this.state = "fulfilled"
                this.callbacks.forEach(cb => cb(value))
            }, 0)
        }
        fn(resolve)
    }

    then(onFulfilled) {
        if (this.state === "pending") {
            this.callbacks.push(onFulfilled)
        } else {
            onFulfilled(this.value)
        }
    }
}

既然實(shí)現(xiàn)了先發(fā)布，再訂閱，那么 resolve 中的 setTimeout 是不是可以去掉了？

并不可以，因?yàn)槿思艺?jīng)的 Promise 是這樣的

let p1 = new Promise(resolve => {
    resolve("haha")
})
p1.then(data => console.log(data))
p1.then(data => console.log(data.toUpperCase()))
console.log("xixi")
// xixi
// haha
// HAHA

只有保留 resolve 中 setTimeout 才能使 FakePromise 實(shí)現(xiàn)相同的效果

let p1 = new FakePromise(resolve => {
    resolve("haha")
})
p1.then(data => console.log(data))
p1.then(data => console.log(data.toUpperCase()))
console.log("xixi")
// xixi
// haha
// HAHA

沒(méi)有 setTimeout 的輸出結(jié)果

// haha
// HAHA
// xixi

鏈?zhǔn)?Promise

正經(jīng)的 Promise 可以鏈?zhǔn)秸{(diào)用，從而避免了回調(diào)地獄

let p1 = new Promise(resolve => {
    fs.readFile("./test.js", "utf8", (err, data) => {
        resolve(data)
    })
}).then(res => {
    return new Promise(resolve => {
        fs.readFile("./main.js", "utf8", (err, data) => {
            resolve(data)
        })
    })
}).then(res => {
    console.log(res)
})

正經(jīng)的 Promise 調(diào)用 then 方法會(huì)返回一個(gè)新的 Promise 對(duì)象

我們偽造的 FakePromise 并沒(méi)有實(shí)現(xiàn)這一功能，原來(lái)的 then 方法

...
    then(onFulfilled){
        if (this.state === "pending") {
            this.callbacks.push(onFulfilled)
        } else {
            onFulfilled(this.value)
        }
    }
...

原來(lái)的 then 方法就是根據(jù) state 判斷是注冊(cè) onFulfilled 函數(shù)，還是執(zhí)行 onFulfilled 函數(shù)

為了實(shí)現(xiàn) FakePromise 的高仿，我們要改造 then 方法，使其返回一個(gè)新的 FakePromise ，為了方便區(qū)分，將返回的 FakePromise 取名為 SonFakePromise ，而先前調(diào)用 then 的對(duì)象為 FatherFakePromise

那么問(wèn)題來(lái)了

那么構(gòu)造這個(gè) SonFakePromise 的函數(shù)參數(shù)是什么

這個(gè) SonFakePromise 什么時(shí)候 resolve ？

首先，當(dāng)構(gòu)造一個(gè)新的 SonFakePromise 時(shí)，會(huì)將傳入的函數(shù)參數(shù) fn 執(zhí)行一遍，且這個(gè)函數(shù)有 resolve 參數(shù)

...
    then(onFulfilled){
      if(this.state === "pending"){
        this.callbacks.push(onFulfilled)
        let SonFakePromise = new FakePromise(function fn(resolve){
          
        })
        return SonFakePromise
      }else{
        onFulfilled(this.value)
        let SonFakePromise = new FakePromise(function fn(resolve){
          
        })
        return SonFakePromise
      }
    }
...

現(xiàn)在的問(wèn)題是這個(gè) SonFakePromise 什么時(shí)候 resolve ？即構(gòu)造函數(shù)中的函數(shù)參數(shù) fn 如何定義

結(jié)合正經(jīng) Promise 的例子來(lái)看

let faherPromise = new Promise(resolve => {
    fs.readFile("./test.js", "utf8", (err, data) => {
        resolve(data)
    })
}).then(res => {
    return new Promise(resolve => {
        fs.readFile("./main.js", "utf8", (err, data) => {
            resolve(data)
        })
    })
}).then(res => {
    console.log(res)
})
// 等同于
let faherPromise = new Promise(resolve => {
    fs.readFile("./test.js", "utf8", (err, data) => {
        resolve(data)
    })
})
let sonPromise = faherPromise.then(function onFulfilled(res){
    return new Promise(function fn(resolve){
        fs.readFile("./main.js", "utf8", (err, data) => {
            resolve(data)
        })
    })
}).then(res => {
    console.log(res)
})

在例子中，onFulfilled 函數(shù)如下，且其執(zhí)行后返回一個(gè)新的 Promise，暫時(shí)取名為 fulPromise

function onFulfilled(res) {
  return new Promise(function fn(resolve){
    fs.readFile("./main.js", "utf8", (err, data) => {
      resolve(data)
    })
  })
}

現(xiàn)在來(lái)分析一下，fatherPromise，sonPromise 和 fulPromise 這三者的關(guān)系

sonPromise 是調(diào)用 fatherPromise 的 then 方法返回的

而調(diào)用這個(gè) then 方法需要傳入一個(gè)函數(shù)參數(shù)，取名為 retFulPromise

retFulPromise 函數(shù)執(zhí)行的返回值 fulPromise

希望下面的代碼能有助于理解

let fatherPromise = new Promise(function fatherFn(fatherResolve){
  fs.readFile("./test.js", "utf8", (err, data) => {
    fatherResolve(data)
  })
})

let sonPromise = fatherPromise.then(retFulPromise)

function retFulPromise(res) {
  let fulPromise = new Promise(function fulFn(fulResolve){
    fs.readFile("./main.js", "utf8", (err, data) => {
      fulResolve(data)
    })
  })
  return fulPromise
}

fatherPromise 的狀態(tài)為 fulfilled 時(shí)，會(huì)執(zhí)行 retFulPromise，其返回 fulPromise ，當(dāng)這個(gè) fulPromise 執(zhí)行 fulResolve 時(shí)，即完成讀取 main.js 時(shí)， sonPromise 也會(huì)執(zhí)行內(nèi)部的 resolve

所以可以看成，sonPromise 的 sonResolve 函數(shù)，也被注冊(cè)到了 fulPromise 上

So，了解了整個(gè)流程，該怎么修改自己的 FakePromise 呢？

秀操作，考驗(yàn)技巧的時(shí)候到了，將 sonResolve 的引用保存起來(lái)，注冊(cè)到 fulFakePromise 上

const fs = require("fs")

class FakePromise {
    constructor(fn) {
        this.value = null
        this.state = "pending"
        this.callbacks = []
        resolve = resolve.bind(this)

        function resolve(value) {
            setTimeout(() => {
                this.value = value
                this.state = "fulfilled"
                this.callbacks.forEach(cb => {
                    let returnValue = cb.onFulfilled(value)
                    if (returnValue instanceof FakePromise) {
                        returnValue.then(cb.sonResolveRes)
                    }
                })
            })
        }
        fn(resolve)
    }

    then(onFulfilled) {
        if (this.state === "pending") {
            let sonResolveRes = null
            let sonFakePromise = new FakePromise(function sonFn(sonResolve) {
                sonResolveRes = sonResolve
            })
            this.callbacks.push({
                sonFakePromise,
                sonResolveRes,
                onFulfilled
            })
            return sonFakePromise
        } else {
            let value = onFulfilled(this.value)
            let sonResolveRes = null
            let sonFakePromise = new FakePromise(function sonFn(sonResolve) {
                sonResolveRes = sonResolve
            })
            if (value instanceof FakePromise) {
                value.then(sonResolveRes)
            }
            return sonFakePromise
        }
    }
}

多角度測(cè)試

let fatherFakePromise = new FakePromise(resolve => {
    fs.readFile("./test.js", "utf8", (err, data) => {
        resolve(data)
    })
})
let sonFakePromise = fatherFakePromise.then(function onFulfilled(res) {
    return new FakePromise(function fn(resolve) {
        fs.readFile("./main.js", "utf8", (err, data) => {
            resolve(data)
        })
    })
}).then(res => {
    console.log(res)
})

let fatherFakePromise = new FakePromise(resolve => {
    fs.readFile("./test.js", "utf8", (err, data) => {
        resolve(data)
    })
})
setTimeout(function () {
    let sonFakePromise = fatherFakePromise.then(function onFulfilled(res) {
        return new FakePromise(function fn(resolve) {
            fs.readFile("./main.js", "utf8", (err, data) => {
                resolve(data)
            })
        })
    }).then(res => {
        console.log(res)
    })
}, 1000)

let fatherFakePromise = new FakePromise(resolve => {
    resolve("haha")
})

let sonFakePromise = fatherFakePromise.then(function onFulfilled(res) {
    return new FakePromise(function fn(resolve) {
        fs.readFile("./main.js", "utf8", (err, data) => {
            resolve(data)
        })
    })
}).then(res => {
    console.log(res)
})

let fatherFakePromise = new FakePromise(resolve => {
    resolve("haha")
})

setTimeout(function () {
    let sonFakePromise = fatherFakePromise.then(function onFulfilled(res) {
        return new FakePromise(function fn(resolve) {
            fs.readFile("./main.js", "utf8", (err, data) => {
                resolve(data)
            })
        })
    }).then(res => {
        console.log(res)
    })
}, 1000)

參考資料

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

云服務(wù)器 GPU云服務(wù)器山寨山寨幣開(kāi)發(fā)交易系統(tǒng) 山寨云直鏈服務(wù)器拒絕 promise

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

XFLY

男|高級(jí)講師

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

TA的文章

Linux環(huán)境基礎(chǔ)開(kāi)發(fā)工具的使用

閱讀 1316·2021-11-22 09:34
SpinServers：美國(guó)服務(wù)器75折優(yōu)惠 $126/月起，圣何塞機(jī)房，亞洲優(yōu)化線路，10Gbps

閱讀 2178·2021-10-08 10:18
Python 常用小妙招（一）

閱讀 1737·2021-09-29 09:35
數(shù)據(jù)可視化之clay:設(shè)計(jì)思想和建立初衷

閱讀 2471·2019-08-29 17:20
webpack4.0打包總結(jié)

閱讀 2149·2019-08-29 15:36
CSS居中對(duì)齊

閱讀 3412·2019-08-29 13:52
Angular2入門(mén)系列（二）————環(huán)境搭建

閱讀 791·2019-08-29 12:29
CSS:hover選擇器

閱讀 1196·2019-08-28 18:10

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

資訊專(zhuān)欄INFORMATION COLUMN

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

山寨一個(gè) Promise

相關(guān)文章

歷史首次！聯(lián)發(fā)科打敗高通成為全球第一，憑什么？

原生JS模擬Bootstrap中的折疊(Collapse)插件

樂(lè)字節(jié)Java反射之一：反射概念與獲取反射源頭class

[phaser3入門(mén)探坑]使用phaser3制作山寨馬里奧

發(fā)表評(píng)論

0條評(píng)論

XFLY

男|高級(jí)講師

TA的文章

Linux環(huán)境基礎(chǔ)開(kāi)發(fā)工具的使用

SpinServers：美國(guó)服務(wù)器75折優(yōu)惠 $126/月起，圣何塞機(jī)房，亞洲優(yōu)化線路，10Gbps

Python 常用小妙招（一）

數(shù)據(jù)可視化之clay:設(shè)計(jì)思想和建立初衷

webpack4.0打包總結(jié)

CSS居中對(duì)齊

Angular2入門(mén)系列（二）————環(huán)境搭建

CSS:hover選擇器

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

山寨一個(gè) Promise

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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