Promise - （二）Promise核心实现

阳光穿透心脏的1/2处 2023-10-01 08:09 33阅读 0赞

**目录**

回调地狱问题及其产生根因

解决回调地狱问题：Promise的设计思路

Promise构造函数的内部细节

Promise构造函数和excutor执行器函数的关系

excutor执行器函数的设计用途

Promise对象对异步任务的执行结果和状态的缓存

Promise构造函数内部工具函数resolve和reject的作用

Promise对象promiseState的状态转换

Promise.prototype.then

then方法的形参说明

then方法形参回调函数的执行时机

then方法形参回调函数的参数说明

当调用then方法的Promise对象是pending状态时，then方法形参回调函数的缓存逻辑

回调地狱的解决方案：then方法链式调用

then链式调用的前提：then方法返回值为Promise对象的设计

then方法返回值Promise的结果和状态取值说明

异步任务下，then方法形参回调函数的返回值的缓存方案

then方法的值穿透设计

同一个Promise对象多次调用then，非链式调用

then方法开启异步微任务的说明

--------------------

# 回调地狱问题及其产生根因 #

Promise是JS语言一种新的异步编程策略，它主要是优化异步任务串行的书写方式。

传统异步任务串行，会产生回调地狱的书写问题，不利于代码维护。

// 需求：计时1s后，打印1，打印完再计时2s,打印2，打印完再计时3s打印3
    
    console.log(Date())
    
    setTimeout(()=>{
        console.log(1, Date())
        setTimeout(()=>{
            console.log(2, Date())
            setTimeout(()=>{
                console.log(3, Date())
            },3000)
        },2000)
    },1000)

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16][]

从结果上看，传统异步串行可以完成需求，但是书写方式难看，不易维护。

导致回调地狱的原因就是：后一个串行的异步任务被加入到前一个串行的异步任务的回调函数中了。

# 解决回调地狱问题：Promise的设计思路 #

如果能将异步任务的回调函数和异步任务解耦的话，就可以解决这一问题，但这是不可能的。

就比如setTimeout函数和它的回调函数是无法解耦的，因为setTimeout设计出来，就是要接收一个函数，并且在计时完成后，回调接收的函数。

那么该怎么办呢？按照Promise的设计思路：将异步任务的回调函数细化，即异步任务整体可以分为：

1、异步任务

2、异步任务的回调函数

3、异步任务的回调函数的内部逻辑

其中1，2是紧密耦合的，但是3是可以解耦出来的。

即：我们不想让3 随着 2的调用而执行

那么3要什么时候执行？

我们期望3是在异步任务完成后的往后余生里，想什么时候执行，就什么时候执行，执行由我们来掌控。

那么3执行时需要什么？

在3没有从2中解耦时，3一般是操作 “异步任务的成功结果” 或 处理 “异步任务的失败原因”，所以3执行时，我们期望可以获得 异步任务的执行结果（成功或失败）

Promise是如何完成3的解耦，又是如何完成异步任务执行结果的保存和传递的呢？

# Promise构造函数的内部细节 #

## Promise构造函数和excutor执行器函数的关系 ##

Promise是一个构造函数，它接收一个excutor执行器函数作为参数，但是这个excutor函数不是异步回调函数，而是同步函数，即new Promise(excutor)时，就会同步执行excutor函数。

## excutor执行器函数的设计用途 ##

excutor函数的作用是封装异步任务的执行，并获取异步任务的执行结果保存到promise对象中。

所以promise对象需要保存异步任务的执行结果。

## Promise对象对异步任务的执行结果和状态的缓存 ##

异步任务的执行结果可以分为两部分：执行结果状态，执行结果数据。

因为有的异步任务执行完成后只会返回成功或失败状态，有的异步任务执行完成后，既会返回状态又会返回结果数据。

所以promise对象有两个重要属性：promiseState 和 promiseResult

那么excutor执行器函数是如何保存异步任务执行结果到promise对象的两个属性里面的呢？我们来写一个例子，看一下excutor执行器函数的处理困难是什么

function Promise(excutor){
        this.promiseState = 'pending'
        this.promiseResult = null
    
        excutor()
    }
    
    function excutor(){
        setTimeout(()=>{
            // 3
        },1000)
    }
    
    var promise = new Promise(excutor)

上面是 异步任务 、excutor执行器函数、 Promise构造函数、promise对象的关系

我们可以发现excutor调用时，触发异步任务执行，之后excutor执行结束了。所以有两个问题：

1、excutor函数中拿不到promise对象

2、setTimeout异步执行，excutor同步执行，excutor等不到setTimeout的结果

所以针对上面两个问题，

1、我们需要将promise对象传递给exuctor

2、我们将保存异步任务结果的工作交给异步任务的回调函数来做

function Promise(excutor){
        this.promiseState = 'pending'
        this.promiseResult = null
    
        excutor(this)
    }
    
    function excutor(promise){
        setTimeout(()=>{
            promise.promiseState = 'fulfilled'
            promise.promiseResult = 'OK'
        },1000)
    }
    
    var promise = new Promise(excutor)

这样就可以完成需求了。

## Promise构造函数内部工具函数resolve和reject的作用 ##

其实上面将promise对象传递给excutor，继而在交给异步任务修改，是很危险的，我们可以随意破坏promise对象，不符合面向对象的封装性。

所以我们需要限制外界对于promise对象的修改，只提供setter操作，而实际上，Promise限制的更大，它只允许外界通知自己异步任务成功还是失败，以及给结果数据。

function Promise(excutor){
        this.promiseState = 'pending'
        this.promiseResult = null
        const that = this
    
        function resolve(data){
            that.promiseState = 'fulfilled'
            that.promiseResult = data
        }
    
        function reject(err){
            that.promiseState = 'rejected'
            that.promiseResult = err
        }
    
        excutor(resolve, reject) // 从传递this 变为 传递 resolve和reject
    }
    
    function excutor(resolve, reject){
        setTimeout(()=>{
            resolve('OK')
        },1000)
    }
    
    var promise = new Promise(excutor)

在Promise构造函数内部内置了两个专门用于设置promise对象的状态和结果的函数，resolve和reject。它们代替了promise对象传递给了excutor执行器函数。

而异步任务传递执行结果也从对promise对象的直接操作，变为了更加安全的setter操作。

## Promise对象promiseState的状态转换 ##

可能大家已经注意到了，promise对象的promiseState设计，这里promiseState有三个状态：pending（异步任务执行中）、fulfilled（异步任务执行返回成功）、rejected（异步任务执行返回失败）

我们需要知道这三个状态的转换逻辑：

首先：promiseState代表着异步任务的执行结果状态

而一次异步任务执行 其状态只有两种转换：

pending -> fulfilled 或者 pending -> rejected

不会发生 fulfilled -> rejected 或者 fulfilled -> pendng 或者 rejected -> pending

即要么执行成功，要么执行失败。

所以我们需要对上面的代码再次优化

另外，我们还需要知道，有一种异步任务执行失败的情况：异步任务抛异常，比如setTimeout抛出异常，此时异常会传递到excutor调用的地方：Promise构造函数中

Promise设计将异步任务执行异常视为执行失败，所以我们需要捕获异常，当成失败处理

# Promise.prototype.then #

## then方法的形参说明 ##

到此，我们已经完成了对于异步任务执行结果的保存（保存到promise对象中）

所以后面我们就要关心：被解耦的 “异步任务的回调函数的内部逻辑” 的指定与执行

这里设计思路很巧妙，一般来说很难想到，我们直接来看Promise的设计

Promise在原型对象上设计了一个实例方法then，这个方法可以被所有的promise实例共享

这个方法被设计出来，就是用来指定 “被解耦的异步任务的回调函数的内部逻辑”，也就是说then方法接收一个 "被解耦的异步任务的回调函数的内部逻辑"

function Promise(excutor){
        this.promiseState = 'pending'
        this.promiseResult = null
        const that = this
    
        function resolve(data){
            if(that.promiseState !== 'pending') return
            that.promiseState = 'fulfilled'
            that.promiseResult = data
        }
    
        function reject(err){
            if(that.promiseState !== 'pending') return
            that.promiseState = 'rejected'
            that.promiseResult = err
        }
    
        try {
            excutor(resolve, reject)
        } catch(e) {
            reject(e)
        }    
        
    }
    
    Promise.prototype.then = function(callback){ // 接收从异步回调函数中解耦出来内部逻辑封装的函数
        
    }
    
    function callback() { // 从异步任务的回调函数中解耦出来内部逻辑（用函数来封装）
        console.log(1)
    }
    
    
    function excutor(resolve, reject){
        setTimeout(()=>{
            resolve('OK')
        },1000)
    }
    
    var promise = new Promise(excutor)

## then方法形参回调函数的执行时机 ##

目前，已经完成了解耦回调逻辑callback的指定，那么callback何时执行呢？

首先无论解耦不解耦，回调函数的内部逻辑，都是在异步任务执行完后再执行的。

function Promise(excutor){
        this.promiseState = 'pending'
        this.promiseResult = null
        const that = this
    
        function resolve(data){
            if(that.promiseState !== 'pending') return
            that.promiseState = 'fulfilled'
            that.promiseResult = data
        }
    
        function reject(err){
            if(that.promiseState !== 'pending') return
            that.promiseState = 'rejected'
            that.promiseResult = err
        }
    
        try {
            excutor(resolve, reject)
        } catch(e) {
            reject(e)
        }    
        
    }
    
    Promise.prototype.then = function(callback){
        if(this.promiseState !== 'pending') { // 异步任务执行完毕，对应的promise对象的promiseState 状态就会变成fulfilled或rejected
            callback()
        }
    }
    
    function callback() {
        console.log(1)
    }
    
    
    function excutor(resolve, reject){
        setTimeout(()=>{
            resolve('OK')
        },1000)
    }
    
    var promise = new Promise(excutor)
    
    promise.then(callback) // 新增

而异步任务有两种结果，成功或失败，所以我们应该针对成功或失败各指定一种处理，所以相应的需要两种callback，一种处理成功结果，一种处理失败结果

function Promise(excutor){
        this.promiseState = 'pending'
        this.promiseResult = null
        const that = this
    
        function resolve(data){
            if(that.promiseState !== 'pending') return
            that.promiseState = 'fulfilled'
            that.promiseResult = data
        }
    
        function reject(err){
            if(that.promiseState !== 'pending') return
            that.promiseState = 'rejected'
            that.promiseResult = err
        }
    
        try {
            excutor(resolve, reject)
        } catch(e) {
            reject(e)
        }    
        
    }
    
    Promise.prototype.then = function(successCB,failCB){
        if(this.promiseState === 'fulfilled') {
            successCB()
        } else if (this.promiseState === 'rejected'){
            failCB()
        } else {
            // 执行中
        }
    }
    
    function successCB() { // 成功回调逻辑
        console.log(1)
    }
    
    function failCB() { // 失败回调逻辑
        console.log('失败了')
    }
    
    
    
    function excutor(resolve, reject){
        setTimeout(()=>{
            resolve('OK')
        },1000)
    }
    
    var promise = new Promise(excutor)
    
    promise.then(successCB, failCB) // 修改

## then方法形参回调函数的参数说明 ##

由于异步任务成功或失败可能不仅有promiseState，还会有promiseResult来反馈成功结果数据或失败结果原因，我们在回调结果中可能需要处理它们。

function Promise(excutor){
        this.promiseState = 'pending'
        this.promiseResult = null
        const that = this
    
        function resolve(data){
            if(that.promiseState !== 'pending') return
            that.promiseState = 'fulfilled'
            that.promiseResult = data
        }
    
        function reject(err){
            if(that.promiseState !== 'pending') return
            that.promiseState = 'rejected'
            that.promiseResult = err
        }
    
        try {
            excutor(resolve, reject)
        } catch(e) {
            reject(e)
        }    
        
    }
    
    Promise.prototype.then = function(successCB,failCB){
        if(this.promiseState === 'fulfilled') {
            successCB(this.promiseResult) // 传递成功结果
        } else if (this.promiseState === 'rejected'){
            failCB(this.promiseResult) // 传递失败原因
        } else {
            // 执行中
        }
    }
    
    function successCB(data) { // 接收成功结果
        console.log(1,data)
    }
    
    function failCB(reason) { // 接收失败原因
        console.log('失败了',reason)
    }
    
    
    function excutor(resolve, reject){
        setTimeout(()=>{
            resolve('OK')
        },1000)
    }
    
    var promise = new Promise(excutor)
    
    promise.then(successCB, failCB)

到目前位置，我们已经完成了"被解耦出来的异步任务的回调函数的内部逻辑"的指定和执行

## 当调用then方法的Promise对象是pending状态时，then方法形参回调函数的缓存逻辑 ##

但是我们需要注意写到这里，then方法还有一个惊天的漏洞

那就是then方法是同步方法，promise.then是同步操作，它必然先于setTimeout异步任务先执行，则promise.then方法中的判断promise.promiseState的逻辑，必然走向 promise.promiseState === ‘pending’中。

也就是说，then方法中 if(promise.promiseState === ‘fulfilled’) else if(promise.promiseState === ‘reject’)都是判断同步回调的，而不是判断异步回调的。

是不是感觉很操蛋。。。。

所以我们需要继续处理then方法的romise.promiseState === ‘pending’情况，此时可以认定是异步任务promise对象调用的then方法。

那么怎么才能让 异步任务执行 同步指定的回调函数内部逻辑呢？

答案是缓存，缓存“同步指定的回调函数内部逻辑”，当异步任务完成后，再拿出来执行。那么缓存到哪里呢？全局自定义变量中？那肯定不行。

我们现在有一个极好的容器，promise对象，我们只需要在promise对象中再定义一个属性来缓存

“同步指定的回调函数内部逻辑”即可。

function Promise(excutor){
        this.promiseState = 'pending'
        this.promiseResult = null
        this.callback = null // 缓存被解耦的异步任务回调函数内部逻辑
        const that = this
    
        function resolve(data){
            if(that.promiseState !== 'pending') return
            that.promiseState = 'fulfilled'
            that.promiseResult = data
        }
    
        function reject(err){
            if(that.promiseState !== 'pending') return
            that.promiseState = 'rejected'
            that.promiseResult = err
        }
    
        try {
            excutor(resolve, reject)
        } catch(e) {
            reject(e)
        }    
        
    }
    
    Promise.prototype.then = function(successCB,failCB){
        if(this.promiseState === 'fulfilled') {
            successCB(this.promiseResult)
        } else if (this.promiseState === 'rejected'){
            failCB(this.promiseResult)
        } else {
            this.callback = { // 缓存被解耦的异步任务回调函数内部逻辑：成功回调逻辑，失败回调逻辑
                resolved: successCB,
                rejected: failCB
            }
        }
    }
    
    function successCB(data) {
        console.log(1,data)
    }
    
    function failCB(reason) {
        console.log('失败了',reason)
    }
    
    
    function excutor(resolve, reject){
        setTimeout(()=>{
            resolve('OK')
        },1000)
    }
    
    var promise = new Promise(excutor)
    
    promise.then(successCB, failCB)

那么何时调用缓存的回调逻辑呢？答案是异步任务执行完后。

难道还要继续传给excutor，然后在异步任务中调用？no no no,那样就白写这么多弯弯绕绕了。

异步任务执行完毕，不仅在excutor函数中可以知道，在Promise内部也能知道，不然Promise的两个结果属性是怎么更改的呢？即：我们可以在resolve和reject函数中调用"缓存的回调逻辑"

function Promise(excutor){
        this.promiseState = 'pending'
        this.promiseResult = null
        this.callback = null
        const that = this
    
        function resolve(data){
            if(that.promiseState !== 'pending') return
            that.promiseState = 'fulfilled'
            that.promiseResult = data
            if(that.callback){
                that.callback.resolved(data) // 在异步任务完成后，调用缓存回调逻辑
            }
        }
    
        function reject(err){
            if(that.promiseState !== 'pending') return
            that.promiseState = 'rejected'
            that.promiseResult = err
            if(that.callback){
                that.callback.rejected(err) // 在异步任务完成后，调用缓存回调逻辑
            }
        }
    
        try {
            excutor(resolve, reject)
        } catch(e) {
            reject(e)
        }    
        
    }
    
    Promise.prototype.then = function(successCB,failCB){
        if(this.promiseState === 'fulfilled') {
            successCB(this.promiseResult)
        } else if (this.promiseState === 'rejected'){
            failCB(this.promiseResult)
        } else {
            this.callback = {
                resolved: successCB,
                rejected: failCB
            }
        }
    }
    
    function successCB(data) {
        console.log(1,data)
    }
    
    function failCB(reason) {
        console.log('失败了',reason)
    }
    
    
    function excutor(resolve, reject){
        setTimeout(()=>{
            resolve('OK')
        },1000)
    }
    
    var promise = new Promise(excutor)
    
    promise.then(successCB, failCB)

此时then方法才算完成了基本能力。

啥，才是基本能力，那then方法还有啥能力呢？

## 回调地狱的解决方案：then方法链式调用 ##

then方法不仅仅是用来指定解耦回调逻辑，并执行它，还有一个最最最重要的核心功能：链式调用

为什么then方法需要支持链式调用？

我们思考一些Promise的设计初衷是为了什么？答：解决回调地狱

那么现在Promise可以解决回调地狱了吗？我们测试一下

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

测试结果表面，好像连串行执行都没有搞定，因为打印1和打印2之间应该间隔2s，打印2和打印3之间应该间隔3秒

那么是我们代码有问题吗？不是，原因是excutor函数是随着new Promise同步执行的，而所以导致异步函数也被触发启动了，所以我们需要延迟excutor的调用

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <script>
            function Promise(excutor) {
                this.promiseState = 'pending'
                this.promiseResult = null
                this.callback = null
                const that = this
    
                function resolve(data) {
                    if (that.promiseState !== 'pending') return
                    that.promiseState = 'fulfilled'
                    that.promiseResult = data
                    if (that.callback) {
                        that.callback.resolved(data) // 在异步任务完成后，调用缓存回调逻辑
                    }
                }
    
                function reject(err) {
                    if (that.promiseState !== 'pending') return
                    that.promiseState = 'rejected'
                    that.promiseResult = err
                    if (that.callback) {
                        that.callback.rejected(err) // 在异步任务完成后，调用缓存回调逻辑
                    }
                }
    
                try {
                    excutor(resolve, reject)
                } catch (e) {
                    reject(e)
                }
    
            }
    
            Promise.prototype.then = function(successCB, failCB) {
                if (this.promiseState === 'fulfilled') {
                    successCB(this.promiseResult)
                } else if (this.promiseState === 'rejected') {
                    failCB(this.promiseResult)
                } else {
                    this.callback = {
                        resolved: successCB,
                        rejected: failCB
                    }
                }
            }
    
            var p1 = function() { // 将new Promise动作封装到函数中，延迟new Promise执行
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve()
                    }, 1000)
                })
            }
    
            var p2 = function() { // 将new Promise动作封装到函数中，延迟new Promise执行
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve()
                    }, 2000)
                })
            }
    
            var p3 = function() { // 将new Promise动作封装到函数中，延迟new Promise执行
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve()
                    }, 3000)
                })
            }
    
            p1().then(() => { // p1()函数调用，开始执行new Promise，继而触发excutor执行，继而触发异步计时器开始计时
                console.log(1, Date());
            })
    
            p2().then(() => { // p2()函数调用，开始执行new Promise，继而触发excutor执行，继而触发异步计时器开始计时
                console.log(2, Date());
            })
    
            p3().then(() => { // p3()函数调用，开始执行new Promise，继而触发excutor执行，继而触发异步计时器开始计时
                console.log(3, Date());
            })
        </script>
    </body>
    
    </html>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

经过优化调用，发现还是没有完成串行执行，三个异步任务几乎是同时开始执行的，原因是：

异步任务的开始执行时机 等价于 new Promise的时机

而上面new Promise的时机就是p1(),p2(),p3()函数调用的时机，而p1().then是同步的，p2().then是同步的，p3().then也是同步的，所以三者几乎是同时执行的，也就造成了三个异步任务几乎同时开启执行，即三个定时器几乎同时开始计时，这样就造成了打印1，2，3都只间隔1s。

### then链式调用的前提：then方法返回值为Promise对象的设计 ###

那么，如何利用Promise.prototype.then方法让异步任务串行呢？

答案是then的链式调用，即then方法的返回值依然是一个promise对象，然后利用新的promise对象再继续调用then，这样下一个then的执行就依赖于上一个then的返回，

在调用方式表现为

p1().then(() => {
                console.log(1, Date());
                return p2()
            }).then(() => {
                console.log(2, Date());
                return p3()
            }).then(() => {
                console.log(3, Date());
            })

这样p1().then的返回值就是p2()，而p1.then的回调函数参数是异步执行，所以p1.then不会立刻返回p2()，而没有调用者，链式第2个then就会延迟执行，而链式第3个then则根本没有执行。

### then方法返回值Promise的结果和状态取值说明 ###

根据Promise设计规范，then方法返回的promise对象是一个新对象，这个新promise对象的promiseState和promiseResult属性取决于then方法函数参数（解耦的回调逻辑函数）的返回值R。

如果R 是一个非Promise对象，则then方法的返回值是一个成功状态的promise对象，且结果为R

如果R 是一个Promise对象，则then方法的返回值是一个和R状态相同，结果相同的新promise对象

如果then方法函数参数（解耦的回调逻辑函数）发生异常，则then方法返回一个失败的promise对象，且结果为异常原因。

Promise.prototype.then = function(successCB, failCB) {
                var result = null
    
                if (this.promiseState === 'fulfilled') {
                    result = successCB(this.promiseResult)
                } else if (this.promiseState === 'rejected') {
                    result = failCB(this.promiseResult)
                } else {
                    this.callback = {
                        resolved: successCB,
                        rejected: failCB
                    }
                }
    
                return new Promise((resolve, reject) => {
    
                })
            }

## 异步任务下，then方法形参回调函数的返回值的缓存方案 ##

如果我们这样设计then返回的promise对象的话

> then方法定义一个局部变量result，用于接收successCB或failCB的返回值

那么就会遇到一个难点，对于异步任务而言，此时this.promiseState === 'pending'，所以会选择缓存successCB和failCB，等待异步任务结束后再调用，那么这样在then方法中就无法同步得到result的值。所以这种方式不可行。

如何获取异步successCB或failCB调用的结果呢？

答案是闭包。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

按照如上这种方式设计，this.callback中resolved和rejected函数就是内层函数（闭包函数），new Promise(excutor)的excutor就是外层函数，内层函数访问了外层函数的局部变量result，这样result就是闭包变量，会被缓存。

但是这样写还是有问题，因为之后对result的处理，会变成同步的，造成异步情况下，result还没赋值，就走到同步result处理中去了，产生错误，

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

所以我们需要把对result的处理也放到闭包函数中做

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

以上就完成了，但是依旧还有一点瑕疵，那就是没有考虑successCB和failCB执行异常的情况，所以我们对common优化一下：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

代入测试

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <script>
            function Promise(excutor) {
                this.promiseState = 'pending'
                this.promiseResult = null
                this.callback = null
                const that = this
    
                function resolve(data) {
                    if (that.promiseState !== 'pending') return
                    that.promiseState = 'fulfilled'
                    that.promiseResult = data
                    if (that.callback) {
                        that.callback.resolved(data) // 在异步任务完成后，调用缓存回调逻辑
                    }
                }
    
                function reject(err) {
                    if (that.promiseState !== 'pending') return
                    that.promiseState = 'rejected'
                    that.promiseResult = err
                    if (that.callback) {
                        that.callback.rejected(err) // 在异步任务完成后，调用缓存回调逻辑
                    }
                }
    
                try {
                    excutor(resolve, reject)
                } catch (e) {
                    reject(e)
                }
    
            }
    
            Promise.prototype.then = function(successCB, failCB) {
                return new Promise((resolve, reject) => {
    
                    if (this.promiseState === 'fulfilled') {
                        common(successCB, this.promiseResult)
                    } else if (this.promiseState === 'rejected') {
                        common(failCB, this.promiseResult)
                    } else {
                        this.callback = {
                            resolved: function(data) {
                                common(successCB, data)
                            },
                            rejected: function(err) {
                                common(failCB, err)
                            }
                        }
                    }
    
                    function common(onType, onTypeParam) {
                        try {
                            var result = onType(onTypeParam)
                            if (result instanceof Promise) {
                                result.then((data) => {
                                    resolve(data)
                                }, (err) => {
                                    reject(err)
                                })
                            } else {
                                resolve(result)
                            }
                        } catch (e) {
                            reject(e)
                        }
                    }
                })
            }
    
            var p1 = function() { // 将new Promise动作封装到函数中，延迟new Promise执行
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve()
                    }, 1000)
                })
            }
    
            var p2 = function() { // 将new Promise动作封装到函数中，延迟new Promise执行
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve()
                    }, 2000)
                })
            }
    
            var p3 = function() { // 将new Promise动作封装到函数中，延迟new Promise执行
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve()
                    }, 3000)
                })
            }
    
            p1().then(() => {
                console.log(1, Date());
                return p2()
            }).then(() => {
                console.log(2, Date());
                return p3()
            }).then(() => {
                console.log(3, Date());
            })
        </script>
    </body>
    
    </html>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_19_color_FFFFFF_t_70_g_se_x_16][]

完美！

但是现在then方法还是没有写完，还需加入then方法的传参处理，有以下两种情况

1、successCB不传

2、failCB不传

## then方法的值穿透设计 ##

对于情况1，successCB不传，代表使用默认successCB，而默认successCB作用是 正确结果穿透

对于情况，failCB不传，代表使用默认failCB，而默认failCB含义是异常穿透

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

测试一下

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

## 同一个Promise对象多次调用then，非链式调用 ##

那么到这里then方法写完了吗？

答案会让你绝望，还没有。。。

那到底还有啥子东西没写呢？我们一直在考虑then的链式调用，那么then的非链式调用情况呢？

你可能说p1().then()这种非链式调用不是已经实现了吗

那么

p1.then()

...

p1.then()

这种针对一个promise对象连续的的then调用，你考虑了吗？

为什么要有这种场景？这种场景是有可能的，比我烧了一锅水，烧好后，我要泡泡面，洗脚，泡茶，冲热水壶

p1()就好比等一锅水烧好

多个then就好比泡泡面，洗脚，泡茶，冲热水壶

所以promise对象不能只缓存一个 解耦的回调逻辑函数，要支持缓存多个

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

## then方法开启异步微任务的说明 ##

到此then写完了吗？还没有，我们用原生的Promise来测试一个例子

setTimeout(() => {
        console.log(1);
    })
    
    new Promise((resolve, reject) => {
        resolve()
    }).then(() => {
        console.log(2);
    })
    
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve()
        })
    }).then(() => {
        console.log(3);
    })
    
    console.log(4);

原生Promise执行结果打印顺序是： 4 2 1 3

那么为什么2会在4后面打印呢，2的promise对象并没有封装异步任务，而是封装了一个空的同步操作，即then方法执行前，调用它的promise对象的状态就已经确定为成功态了。所以then方法中指定的成功态回调函数理论上应该要立即执行。

按照我们前面Promise重写的逻辑也应该是立即执行的，即结果为2 4 1 3。

那么原生Promise对于then方法的参数回调函数的执行时机定义是啥呢？

请看到[(5条消息) 随笔-异步宏任务和异步微任务\_qfc\_128220的博客-CSDN博客][5_ _-_qfc_128220_-CSDN]

then开启微任务目前还没有想到咋重写，因为已经不是Promise自己内部的实现了，即不是JS可以实现的了，而是JS的事件循环机制做的事。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f0e710817fed4874982f9080b6fe08bc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/a0e0a3241a1142a4a62d709b65685be5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/e3118d957b3a4df8b9efad3eac26b3b2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/efcf9ae4624b4bc68a8000231317a053.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/93bef26f657b403dbe75b105b6ff21e5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/bc129b0d321e447293b2767f729dcd78.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/4f70b99f32cf4692a649b12990194beb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a5634e91861f4a8fb22c9298efb3bae1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_19,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/c5e6e9567b604c1db9cdcb80911498f8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/cad96748d2a14c56aedea282053b8c00.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/e6375786b83441dba073838f39e515c2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/ca84298656d849fdbdf131b852cdb9d0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/62a881354ad6478daeb47015f2688502.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[5_ _-_qfc_128220_-CSDN]: https://blog.csdn.net/qfc_128220/article/details/121703364?spm=1001.2014.3001.5501