当前位置: 首页 > news >正文

山寨一个 Promise

一点感悟

Promise 是编写异步的另一种方式,鄙人愚见,它就是 Callback 的一种封装

相比 Callback ,它有以下特点

  • Promise 将异步结果保存起来,可以随时获取
  • 链式调用 then 方法会返回一个新的 Promise ,从而避免了回调地狱

决定一次异步有两个环节

  1. 发起异步事件
  2. 处理异步结果

Promise 可以给一个异步事件注册多个处理函数,举个栗子,就像这样

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 实现一样的效果

  • 用 callbacks 将所有注册的函数保存
  • 待异步事件返回结果,再遍历 callbacks ,依次执行所有注册的函数

就像这样

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 有点像

从发布-订阅模式的角度来看:

  • FakePromise 中通过 .then(onFulfilled) 来订阅消息,注册处理异步结果的函数
  • 通过 resolve(data) 来发布消息,触发处理异步结果的函数去执行,发布的时机是异步事件完成时

延时 resolve

先前的代码存在一个问题,如果在执行 p1.then(data => console.log(data)) 之前,resolve(data) 就已经执行了,那么再通过 .then(onFulfilled) 注册的处理异步结果的函数将永远不会执行

为了避免这种情况,改造 resolve 函数,在其内部添加 setTimeout,从而保证那些注册的处理函数是在下一个事件队列中执行,就像这样

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

通过延时执行 resolve 内部的函数,保证了先订阅消息,再发布消息

但是 Promise 还有个额外的功能是在发布消息后,仍然可以订阅消息,并且立即执行,就像这样

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之内,文件早已读取成功,但是在5s之后,依然可以通过 .then 注册处理事件,并且该事件会立即执行

先发布,再订阅

实现先发布,再订阅的基础是将消息保存下来。其次要记录状态,判断消息是否已被发布,如果未发布消息,则通过 .then 来注册回调时,是将回调函数添加到内部的回调队列中;如果消息已发布,则通过 .then 来注册回调时,直接将消息传至回调函数,并执行

Promise 规范中采用的状态机制是 pendingfulfilledrejected

pending 可以转化为 fulfilledrejected ,并且只能转化一次。

转化为 fulfilledrejected 后,状态就不可再变

修改代码如下

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

既然实现了先发布,再订阅,那么 resolve 中的 setTimeout 是不是可以去掉了?

并不可以,因为人家正经的 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 实现相同的效果

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

没有 setTimeout 的输出结果

// haha
// HAHA
// xixi

链式 Promise

正经的 Promise 可以链式调用,从而避免了回调地狱

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

正经的 Promise 调用 then 方法会返回一个新的 Promise 对象

我们伪造的 FakePromise 并没有实现这一功能,原来的 then 方法

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

原来的 then 方法就是根据 state 判断是注册 onFulfilled 函数,还是执行 onFulfilled 函数

为了实现 FakePromise 的高仿,我们要改造 then 方法,使其返回一个新的 FakePromise ,为了方便区分,将返回的 FakePromise 取名为 SonFakePromise ,而先前调用 then 的对象为 FatherFakePromise

那么问题来了

  • 那么构造这个 SonFakePromise 的函数参数是什么
  • 这个 SonFakePromise 什么时候 resolve ?

首先,当构造一个新的 SonFakePromise 时,会将传入的函数参数 fn 执行一遍,且这个函数有 resolve 参数

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

现在的问题是这个 SonFakePromise 什么时候 resolve ?即构造函数中的函数参数 fn 如何定义

结合正经 Promise 的例子来看

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 函数如下,且其执行后返回一个新的 Promise,暂时取名为 fulPromise

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

现在来分析一下,fatherPromisesonPromisefulPromise 这三者的关系

  • sonPromise 是调用 fatherPromise 的 then 方法返回的
  • 而调用这个 then 方法需要传入一个函数参数,取名为 retFulPromise
  • retFulPromise 函数执行的返回值 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 的状态为 fulfilled 时,会执行 retFulPromise,其返回 fulPromise ,当这个 fulPromise 执行 fulResolve 时,即完成读取 main.js 时, sonPromise 也会执行内部的 resolve

所以可以看成,sonPromise 的 sonResolve 函数,也被注册到了 fulPromise 上

So,了解了整个流程,该怎么修改自己的 FakePromise 呢?

秀操作,考验技巧的时候到了,将 sonResolve 的引用保存起来,注册到 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
        }
    }
}

多角度测试

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原理

相关文章:

  • 重写、覆盖、重载、多态几个概念的区别分析
  • Ankara prefabrik evler
  • oracle 简单SQL
  • 快速安装配置zabbix_agent端
  • hdu 1754:I Hate It(线段树,入门题,RMQ问题)
  • Unity加载模块深度解析(Shader篇)
  • Android自带SipDemo详解 4
  • nodejs小问题拾遗
  • 李寒峰:微信支付-无法阻挡的生活潮流
  • 20.34 批量远程执行命令
  • Linux hosts.allow与hosts.deny文件设置
  • 来分享一个我自己写的HTML模板引擎,Leopard
  • VS2010下静态链接FreeImage
  • 网站开放平台发布-开创应用个人创业
  • python自动化学习笔记(八)
  • JavaScript-如何实现克隆(clone)函数
  • 【407天】跃迁之路——程序员高效学习方法论探索系列(实验阶段164-2018.03.19)...
  • Apache Spark Streaming 使用实例
  • css布局,左右固定中间自适应实现
  • Hibernate【inverse和cascade属性】知识要点
  • IE报vuex requires a Promise polyfill in this browser问题解决
  • Java 网络编程(2):UDP 的使用
  • javascript 哈希表
  • Linux链接文件
  • python3 使用 asyncio 代替线程
  • SpiderData 2019年2月25日 DApp数据排行榜
  • tab.js分享及浏览器兼容性问题汇总
  • Vue 2.3、2.4 知识点小结
  • 初识 webpack
  • 道格拉斯-普克 抽稀算法 附javascript实现
  • 二维平面内的碰撞检测【一】
  • 猴子数据域名防封接口降低小说被封的风险
  • 前端工程化(Gulp、Webpack)-webpack
  • 数据科学 第 3 章 11 字符串处理
  • 探索 JS 中的模块化
  • MiKTeX could not find the script engine ‘perl.exe‘ which is required to execute ‘latexmk‘.
  • Prometheus VS InfluxDB
  • 阿里云服务器如何修改远程端口?
  • ​LeetCode解法汇总2182. 构造限制重复的字符串
  • #162 (Div. 2)
  • (13):Silverlight 2 数据与通信之WebRequest
  • (17)Hive ——MR任务的map与reduce个数由什么决定?
  • (java)关于Thread的挂起和恢复
  • (LeetCode) T14. Longest Common Prefix
  • (附源码)springboot家庭装修管理系统 毕业设计 613205
  • (过滤器)Filter和(监听器)listener
  • (五)关系数据库标准语言SQL
  • (已解决)报错:Could not load the Qt platform plugin “xcb“
  • (原創) 系統分析和系統設計有什麼差別? (OO)
  • (转)Java socket中关闭IO流后,发生什么事?(以关闭输出流为例) .
  • (转)甲方乙方——赵民谈找工作
  • ***测试-HTTP方法
  • .NET 4.0中使用内存映射文件实现进程通讯
  • .NET 中的轻量级线程安全
  • .NET 中使用 TaskCompletionSource 作为线程同步互斥或异步操作的事件