【前端Tip】Promise

2023-10-29  本文已影响0人  沉江小鱼

1. 简介

Promise是用来进行异步编程的。在Promise出现之前，传统的异步编程靠的是监听事件和回调函数，比如：

const xhr = new XMLHttpRequest();
xhr.addEventListener("load", function(data) {
    console.log(data);
});
xhr.open("GET", "http://www.example.com/");
xhr.send();

这种方式很可能会产生回调地狱，如果我们想在第一个请求成功并且返回数据后，再去发送第二个请求，那只能在第一个请求成功的回调函数中发送。

以此类推，如果还想再发送下一个请求，就只能在上一个请求成功的回调函数中发送，比如：

const xhr = new XMLHttpRequest();
xhr.addEventListener("load", function(data) {
    console.log(data);
    const xhr1 = new XMLHttpRequest();
    xhr1.open("GET", "http://www.example.com/");
    xhr1.send();
    xhr1.addEventListener("load", function(data1) {
        console.log(data1)
        //... 发送第三个请求
    });
});
xhr.open("GET", "http://www.example.com/");
xhr.send();

Promise可以有效的帮助我们解决回调地狱问题，可以把Promise理解为一个容器，并且是一个有状态的对象，包括以下3种状态：

Pending是初始状态，它可以由Pending变成Fullfiled或者Rejected，但是无论变成哪种状态都是不可逆的。

2. Promise的基本用法

2.1 创建Promise对象

// 创建一个promise对象
new Promise(function(resolve, reject) {
    ... 
    if(/*异步操作成功*/){
        resolve(data);
    }else {
        reject(err)
    }
)

Promise构造函数接收一个函数作为参数，该函数的两个参数分别是resolve和reject，他们也是函数：

需要注意一个细节：我们传进去的这个函数在创建Promise对象时就会执行。所以，有时我们会将Promise包在一个函数中，在需要的时候才去运行这个函数，比如：

function runAsync() {
  return new Promise((resolve, reject) => {
    resolve(123);
  })
}

runAsync()

我们常见的then、catch、finally方法是添加在Promise构造函数的原型对象上的。


截屏2023-10-30 16.44.55.png

2.2 Promise.prototype.then

当Promise实例生成之后，可以使用then方法分别指定Fullfiled状态和Rejected状态的回调函数：

runAsync().then(function(value)  {
    // success
}, function(err){
    // failure
})

then方法可以接受两个回调函数作为参数：成功回调和失败回调。其中，第二个函数是可选的。这两个函数都接收Promise对象传出的值作为参数。

需要注意的是：then方法指定的回调函数会在触发resolve和reject函数之后执行。

到这里我们已经了解了Promise最常用的使用方式了，在实际的开发中，经常会出现上面提到的回调地狱的情况，Promise可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作，这样就可以解决回调地狱的问题了，在下面会有介绍到。

2.3 Promise.prototype.catch

Promise实例的catch方法，其实和then的第二个参数一样，用来指定reject的回调。用法是这样：

promise.then((data) => {
    console.log('resolved',data);
}).catch((err) => {
    console.log('rejected',err);
});

效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。可以看下面的代码示例：

p.then((data) => {
    console.log('resolved',data);
    console.log(somedata); //此处的somedata未定义
})
.catch((err) => {
    console.log('rejected',err);
});

在resolve的回调中，我们打印的somedata这个变量是没有定义的。如果我们不用Promise，代码运行到这里就直接在控制台报错了，不会往下运行了。但是在这里，会得到这样的结果：


截屏2023-10-25 20.08.58.png

也就是说进到catch方法里面了，可以捕获到这个错误，不会阻止代码运行。

2.4 Promise.prototype.finally

用于指定不管Promise对象最后状态如何，都会执行的操作。

        let promise = new Promise((resolve, reject) => {
            resolve(index)
        })
        promise.then((value)=>{
            console.log(value);
        }).catch((err)=>{
            console.log(err);
        }).finally(()=>{
            console.log("不管结果如何，都会执行这里的代码");
        })

3. 特殊方法（all、race、allSettled、any）

3.1 Promise.all

Promise.all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。简单来说，谁跑的慢就以谁为准执行回调。

Promise.all方法接收一个数组参数，里面的值都是Promise对象，可以看下面的例子：

let Promise1 = new Promise(function(resolve, reject){})
let Promise2 = new Promise(function(resolve, reject){})
let Promise3 = new Promise(function(resolve, reject){})

let p = Promise.all([Promise1, Promise2, Promise3])

p.then(funciton(value){
  // 三个都成功则成功  
}, function(){
  // 只要有失败，则失败 
})

有了all，就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据。比如一个页面有多个请求，我们可以使用Promise.all方法，同时发出多个请求，在所有的请求都返回数据之后再渲染页面。

需要注意的是，当三个Promise都执行成功后才会回调then方法中的resolve回调函数，参数值是一个数组，包括上面三个Promise执行成功回调的数据。

3.2 Promise.race

谁跑的快，以谁为准执行回调。
race的使用场景：比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作，代码如下：

 //请求某个图片资源
    function requestImg(){
        var p = new Promise((resolve, reject) => {
            var img = new Image();
            img.onload = function(){
                resolve(img);
            }
            img.src = '图片的路径';
        });
        return p;
    }
    //延时函数，用于给请求计时
    function timeout(){
        var p = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('图片请求超时');
            }, 5000);
        });
        return p;
    }
    Promise.race([requestImg(), timeout()]).then((data) =>{
        console.log(data);
    }).catch((err) => {
        console.log(err);
    });

requestImg函数会异步请求一张图片，我把地址写为"图片的路径"，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。运行结果如下：


image.png

4. Promise的链式操作

我们可以看下面的一个例子，当有多层回调时是怎么使用Promise的：

        function runAsync(index) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(`执行完${index}`)
                }, index * 500);
            })
        }

        runAsync(1).then(result=>{
            console.log(result);
            return runAsync(2)
        }).then(result=>{
            console.log(result);
            return runAsync(3)
        }).then(result=>{
            console.log(result);
            return runAsync(4)
        }).then(result=>{
            console.log(result);
            return "end"
        }).then(result=>{
            console.log(result);
        })

输出：

执行完1
执行完2
执行完3
执行完4
end

在链式操作中，当一个Promise结束后，可以继续返回一个新的Promise，在下一个then方法中继续接收其返回的resolve。

当然，在then方法中，也可以直接return数据而不是Promise对象，在后面的then中也可以接收到数据，可以看上面例子中的最后一个。

5. 手写Promise

上面简单介绍了Promise的使用，下面我们会从最基本的方法开始实现一个Promise。

5.1 Promise基础实现

5.1.1 Promise的基础功能

我们先写一个只有基础功能的例子：

const p = new Promise((resolve, reject) => {
     resolve('fulfilled');
     reject('rejected');
})

p.then(value => {
    console.log(value);
}, reason => {
    console.log(reason);
})

// fulfilled

我们来分析一下这段代码都做了什么：

理解了这段代码的执行逻辑之后，我们可以分两步实现Promise的基础功能，分别是：new Promise的实现原理和then方法的实现原理。

5.1.2 new Promise的实现原理

<script>

        const status_Pending = "pending"
        const status_Fulfilled = "fulfilled"
        const status_Rejected = "rejected"

        class CustomPromise {
            // 初始状态
            status = status_Pending
            // 成功之后的值
            value = null
            // 失败之后的原因
            reason = null

            constructor(executor) {
                // 将resolve和reject传给new Promise的回调函数
                executor(this.resolve, this.reject)
            }

            // resolve
            resolve = (value) => {
                // 改变状态为fulfilled
                if (this.status === status_Pending) {
                    this.status = status_Fulfilled
                }
            }

            // rejected
            reject = (reason) => {
                // 改变状态为 rejected
                if (this.status === status_Pending) {
                    this.status = status_Rejected
                }
            }
        }

    </script>

这里有两个注意点：

JavaScript中，bind方法用于创建一个新的函数，该函数的this值会被指定为一个特定的对象，并且在调用时，指定的参数将作为新函数的参数列表。
https://baijiahao.baidu.com/s?id=1761949446370869152&wfr=spider&for=pc

5.1.3 then方法的实现原理

class CustomPromise {
  ...省略部分代码
            // resolve
            resolve = (value) => {
                // 改变状态为fulfilled
                if (this.status === status_Pending) {
                    this.status = status_Fulfilled
                    this.value = value
                }
            }

            // rejected
            reject = (reason) => {
                // 改变状态为 rejected
                if (this.status === status_Pending) {
                    this.status = status_Rejected
                    this.reason = reason
                }
            }
  ...省略部分代码
}

5.1.4 基础功能的完整代码

    <script>

        const status_Pending = "pending"
        const status_Fulfilled = "fulfilled"
        const status_Rejected = "rejected"

        class CustomPromise {
            // 初始状态
            status = status_Pending
            // 成功之后的值
            value = null
            // 失败之后的原因
            reason = null

            constructor(executor) {
                // 将resolve和reject传给new Promise的回调函数
                executor(this.resolve, this.reject)
            }

            // resolve
            resolve = (value) => {
                // 改变状态为fulfilled
                if (this.status === status_Pending) {
                    this.status = status_Fulfilled
                    this.value = value
                }
            }

            // rejected
            reject = (reason) => {
                // 改变状态为 rejected
                if (this.status === status_Pending) {
                    this.status = status_Rejected
                    this.reason = reason
                }
            }

            then(onFulfilled, onRejected) {
                if (this.status === status_Fulfilled) {
                    // 把 resolve 的值传递给 fulfilled 状态的回调函数，并且调用它。
                    onFulfilled(this.value)
                } else if (this.status === status_Rejected) {
                    // 把 reject 的值传递给 rejected 状态的回调函数，并且调用它。
                    onRejected(this.reason)
                }
            }
        }
    </script>

我们用一开始的例子来测试一下：

        const promise = new CustomPromise((resolve, reject) => {
            resolve("value")
        })
        promise.then(value => {
            console.log(value);
        },reason => {

        });

// value

Promise 基础功能的实现原理顺利完成。

5.2 处理异步逻辑

基础版本的Promise有个缺点，就是无法处理异步的情况。


const p = new CustomPromise((resolve, reject) => {
    setTimeout(() => {
        resolve("fulfilled");
    });
});

p.then(value => {
    console.log(value);
}, reason => {
    console.log(reason);
})

// 不会输出任何信息

由于使用了setTimeout执行resolve函数，导致then方法执行比resolve函数要早，所以then方法在执行的时候，Promise的状态是Pending，不会执行任何回调函数。

基于这种情况，我们需要在then方法中添加处理pending状态的逻辑：如果在then方法中判断状态是pending，那么就先将两个回调函数保存起来，然后在Promise内部的resolve或reject方法中执行。

<script>

        const status_Pending = "pending"
        const status_Fulfilled = "fulfilled"
        const status_Rejected = "rejected"

        class CustomPromise {
            // 初始状态
            status = status_Pending
            // 成功之后的值
            value = null
            // 失败之后的原因
            reason = null
            // 保存onFulfilled回调函数
            onFulfilledCallback = null
            // 保存 onRejected 回调函数
           onRejectedCallback = null

            constructor(executor) {
                // 将resolve和reject传给new Promise的回调函数
                executor(this.resolve, this.reject)
            }

            // resolve
            resolve = (value) => {
                // 改变状态为fulfilled
                if (this.status === status_Pending) {
                    this.status = status_Fulfilled
                    this.value = value
                    // 执行 onFulfilled 回调函数
                    if (this.onFulfilledCallback) {
                        this.onFulfilledCallback(value)
                    }
                }
            }

            // rejected
            reject = (reason) => {
                // 改变状态为 rejected
                if (this.status === status_Pending) {
                    this.status = status_Rejected
                    this.reason = reason
                    // 执行 onRejected 回调函数
                    if (this.onRejectedCallback) {
                        this.onRejectedCallback(reason)
                    }
                }
            }

            then(onFulfilled, onRejected) {
                if (this.status === status_Fulfilled) {
                    // 把 resolve 的值传递给 fulfilled 状态的回调函数，并且调用它。
                    onFulfilled(this.value)
                } else if (this.status === status_Rejected) {
                    // 把 reject 的值传递给 rejected 状态的回调函数，并且调用它。
                    onRejected(this.reason)
                } else {
                    // pending 状态下保存回调函数
                    onFulfilledCallback = onFulfilled
                    onRejectedCallback = onRejected
                }
            }
        }

        const promise = new CustomPromise((resolve, reject) => {
            resolve("value")
        })
        promise.then(value => {
            setTimeout(() => {
                console.log(value);
            }, 1000);
        },reason => {

        });

    </script>

这样，我们就能处理异步逻辑了。

5.3 then方法的多次调用

别忘了，Promise实例对象的then方法是可以多次调用的，而我们现在的代码是无法做到这一点的：

const p = new CustomPromise((resolve, reject) => {
    setTimeout(() => {
        resolve("fulfilled");
    });
});

p.then((value) => {
    console.log("1", value);
});

p.then((value) => {
    console.log("2", value);
});

p.then((value) => {
    console.log("3", value);
});

// 3 fulfilled

目前的代码只能输出 3 fulfilled。为什么只能输出 3 fulfilled 呢？关键在于源码当中 then 方法保存回调函数的方式：

class CustomPromise {
    //... 省略部分代码
    then(onFulfilled, onRejected) {
        if (this.status === status_Fulfilled) {
            onFulfilled(this.value);
        } else if (this.status === status_Rejected) {
            onRejected(this.reason);
        } else {
            // pending 状态下保存回调函数
            this.onFulfilledCallback = onFulfilled;
            this.onRejectedCallback = onRejected;
        }
    }
}

回调函数会存在成员变量中，这样就会导致保存的是最后一个then方法的回调函数，所以这里应该使用数组来保存所有的回调函数，同时Promise内部的resolve和reject方法也需要循环调用所有的回调函数：

    <script>

        const status_Pending = "pending"
        const status_Fulfilled = "fulfilled"
        const status_Rejected = "rejected"

        class CustomPromise {
            // 初始状态
            status = status_Pending
            // 成功之后的值
            value = null
            // 失败之后的原因
            reason = null
            // 保存onFulfilled回调函数
            onFulfilledCallbacks = []
            // 保存 onRejected 回调函数
            onRejectedCallbacks = []

            constructor(executor) {
                // 将resolve和reject传给new Promise的回调函数
                executor(this.resolve, this.reject)
            }

            // resolve
            resolve = (value) => {
                // 改变状态为fulfilled
                if (this.status === status_Pending) {
                    this.status = status_Fulfilled
                    this.value = value
                    // 执行所有的 onFulfilled 回调函数
                    this.onFulfilledCallbacks.forEach(callback => {
                        callback(this.value)
                    });
                }
            }

            // rejected
            reject = (reason) => {
                // 改变状态为 rejected
                if (this.status === status_Pending) {
                    this.status = status_Rejected
                    this.reason = reason
                    // 执行所有的 onRejected 回调函数
                    this.onRejectedCallbacks.forEach(callback => {
                        callback(this.reason)
                    });
                }
            }

            then(onFulfilled, onRejected) {
                if (this.status === status_Fulfilled) {
                    // 把 resolve 的值传递给 fulfilled 状态的回调函数，并且调用它。
                    onFulfilled(this.value)
                } else if (this.status === status_Rejected) {
                    // 把 reject 的值传递给 rejected 状态的回调函数，并且调用它。
                    onRejected(this.reason)
                } else {
                    // pending 状态下保存回调函数
                    this.onFulfilledCallbacks.push(onFulfilled)
                    this.onRejectedCallbacks.push(onRejected)
                }
            }
        }

        const promise = new CustomPromise((resolve, reject) => {
            resolve("value")
        })
        promise.then(value => {
            setTimeout(() => {
                console.log(value);
            }, 1000);
        },reason => {

        });

    </script>

这其实是一个「观察者模式」，then 方法的 this.onFulfilledCallbacks.push(onFulfilled) 和 this.onRejectedCallbacks.push(onRejected) 就是在添加订阅者，而 resolve 和 reject 方法就是在通知所有的订阅者。

我们再运行一下用例，得出结果：

1 fulfilled
2 fulfilled
3 fulfilled

5.4 then方法的链式调用

Promise最核心的功能就是then方法的链式调用，这也是解决回调地狱的关键。我们目前手动实现的代码是不能进行then方法的链式调用的，因为then方法没有任何返回值。

要想实现then方法的链式调用，then方法必须返回Promise对象，并且下一个then方法的回调函数的参数会依赖上一个then方法的回调函数的返回值，这种依赖有两种情况：

const p = new Promise((resolve, reject) => {
    resolve(1);
});
p.then((value) => {
    console.log(value);
    return new Promise((resolve, reject) => {
        resolve(2);
        // reject(2);
    });
}).then((value) => {
    console.log("fulfilled", value);
}, (err) => {
    console.log("rejected", err);
});

// 1
// fulfilled 2

// 如果调用的是 reject(2)，那么返回的是：
// 1
// rejected 2

const p = new Promise((resolve, reject) => {
    resolve(1);
});
p.then((value) => {
    console.log(value);
    return {
        then(resolve, reject) {
            resolve(2);
            // reject(2);
        }
    };
}).then((value) => {
    console.log("fulfilled", value);
}, (err) => {
    console.log("rejected", err);
});

// 1
// fulfilled 2

// 如果调用的是 reject(2)，那么返回的是：
// 1
// rejected 2

const p = new Promise((resolve, reject) => {
    resolve(1);
});
p.then((value) => {
    console.log(value);
    return {
        value: 2,
    };
}).then((value) => {
    console.log("fulfilled", value);
});

// 1
// fulfilled { value: 2 }

了解了then方法链式调用的基本情况后，我们手动实现一下then方法的链式调用。

首先，让then方法返回一个Promise对象：

then(onFulfilled, onRejected) {
       const promise2 = new CustomPromise((resolve, reject) => {
             if (this.status === status_Fulfilled) {
                // 把 resolve 的值传递给 fulfilled 状态的回调函数，并且调用它。
                onFulfilled(this.value)
            } else if (this.status === status_Rejected) {
                // 把 reject 的值传递给 rejected 状态的回调函数，并且调用它。
                onRejected(this.reason)
            } else {
                 // pending 状态下保存回调函数
                this.onFulfilledCallbacks.push(onFulfilled)
                this.onRejectedCallbacks.push(onRejected)
           }
        }) 
        return promise2
}

接着，通过resolve和reject函数来改变promise2的状态，并且建立上一个then和下一个then的依赖关系：

    <script>

        const status_Pending = "pending"
        const status_Fulfilled = "fulfilled"
        const status_Rejected = "rejected"

        class CustomPromise {
            // 初始状态
            status = status_Pending
            // 成功之后的值
            value = null
            // 失败之后的原因
            reason = null
            // 保存onFulfilled回调函数
            onFulfilledCallbacks = []
            // 保存 onRejected 回调函数
            onRejectedCallbacks = []

            constructor(executor) {
                // 将resolve和reject传给new Promise的回调函数
                executor(this.resolve, this.reject)
            }

            // resolve
            resolve = (value) => {
                // 改变状态为fulfilled
                if (this.status === status_Pending) {
                    this.status = status_Fulfilled
                    this.value = value
                    // 执行所有的 onFulfilled 回调函数
                    this.onFulfilledCallbacks.forEach(callback => {
                        callback(this.value)
                    });
                }
            }

            // rejected
            reject = (reason) => {
                // 改变状态为 rejected
                if (this.status === status_Pending) {
                    this.status = status_Rejected
                    this.reason = reason
                    // 执行所有的 onRejected 回调函数
                    this.onRejectedCallbacks.forEach(callback => {
                        callback(this.reason)
                    });
                }
            }

            then(onFulfilled, onRejected) {
                const promise2 = new CustomPromise((resolve, reject) => {
                    if (this.status === status_Fulfilled) {
                        // 获取上一个then方法的fulfilled回调函数的返回值
                        const v = onFulfilled(this.value)
                        // 根据返回值，改变promise2的状态，并建立与下一个then方法的关系
                        resolvePromise(v, resolve, reject)
                    } else if (this.status === status_Rejected) {
                        // 获取上一个then方法的rejected回调函数的返回值
                        const v = onRejected(this.reason)
                        // 根据返回值，改变promise2的状态，并建立与下一个then方法的关系
                        resolvePromise(v, resolve, reject)
                    } else {
                        // pending 状态下保存回调函数
                        this.onFulfilledCallbacks.push(onFulfilled)
                        this.onRejectedCallbacks.push(onRejected)
                    }
                })
                return promise2
            }

            resolvePromise(value, resolve, reject) {
                if (typeof value === "object" || typeof value === "function") {
                    if (value === null) {
                        // 如果返回值是null，直接调用resolve函数，promise2的状态变为fulfilled
                        resolve(value)
                    }
                    try {
                        if (typeof value.then === "function") {
                            // 如果返回值是 Promise 对象或者 thenable 对象
                            // 那就只能交给它们的 then 方法来改变 promise2 的状态，以及获取相对应的状态值
                            // 以下代码等同于 value.then((value) => resolve(value), (err) => reject(err))
                            value.then(resolve, reject)
                        } else {
                            // 如果 then 不是函数，同 null 情况一样的处理逻辑。
                            resolve(value);
                        }
                    } catch (error) {
                        // 出现异常的情况下，调用 reject 函数
                        // promise2 的状态变为 rejected，
                        // 错误信息由下一个 then 方法的第二回调函数接收
                        reject(error);
                    }
                } else {
                    // 如果返回值是其他对象或者原始数据类型值，同 null 情况一样的处理逻辑。
                    resolve(value);
                }
            }
        }
    </script>

这里比较难理解的是，返回值为Promise对象或者thenable对象的处理情况：value.then(resolve, reject)，这段代码写完整一点就是：

value.then((value) => resolve(value), (err) => reject(err))

这里 then 方法的回调函数中 value 参数值和 err 参数值就是 Promise 对象或者 thenable 对象内部调用 resolve 或者 reject 函数传入的参数值，再把这些值传递给 promise2 的 resolve 和 reject 函数，从而达到改变 promise2 的状态，下一个 then 方法的回调函数也会被调用并且接收到这些值。

总得来说就是，promise2 的状态完全由返回值（Promise 对象或者 thenable 对象）来控制。就跟以下这段代码一样：


const promise2 = new CustomPromise((resolve2, reject2) => {
    const value = new CustomPromise((resolve, reject) => {
        resolve(1);
    });
    value.then(
        (v) => resolve2(v),
        (err) => reject2(err)
    );
});

promise2.then((value) => {
  console.log(value);
});

// 1

我们执行一下测试用例，看我们自己写的Promise是否可以正常工作：


const p = new CustomPromise((resolve, reject) => {
  resolve(1);
});
p.then((value) => {
  console.log(value);
  return new CustomPromise((resolve) => {
    resolve(2);
  });
}).then((value) => {
  console.log(value);
});

// 1
// 2



p.then((value) => {
  console.log(value);
  return {
    then(resolve) {
      resolve(2);
    }
  };
}).then((value) => {
  console.log(value);
});

// 1
// 2


p.then((value) => {
  console.log(value);
  return 2;
  };
}).then((value) => {
  console.log(value);
});

// 1
// 2

那如果 then 方法是返回自身的 Promise 对象该怎么办？我们来看看原生的 Promise 是怎么处理的：


const p = new Promise((resolve, reject) => {
  resolve(1);
});
const p1 = p.then(value => {
  console.log(value);
  return p1;
});

// 1
// Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>

报错，错误信息是：会发生 Promise 循环调用。
所以，我们需要改造一下 SelfPromise 的代码，来模拟这种报错的效果：

 then(onFulfilled, onRejected) {
                const promise2 = new CustomPromise((resolve, reject) => {
                    if (this.status === status_Fulfilled) {
                        // 获取上一个then方法的fulfilled回调函数的返回值
                        const v = onFulfilled(this.value)
                        // 根据返回值，改变promise2的状态，并建立与下一个then方法的关系
                        // 将 promise2 传入进行判断
                        this.resolvePromise(promise2, v, resolve, reject)
                    } else if (this.status === status_Rejected) {
                        // 获取上一个then方法的rejected回调函数的返回值
                        const v = onRejected(this.reason)
                        // 根据返回值，改变promise2的状态，并建立与下一个then方法的关系
                        // 将 promise2 传入进行判断
                        this.resolvePromise(promise2, v, resolve, reject)
                    } else {
                        // pending 状态下保存回调函数
                        this.onFulfilledCallbacks.push(onFulfilled)
                        this.onRejectedCallbacks.push(onRejected)
                    }
                })
                return promise2
            }

            resolvePromise(promise2, value, resolve, reject) {
                // 如果 then 方法返回的是自身 Promise 对象，返回错误信息
                if (promise2 === value) {
                    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'));
                }
                // 如果then方法返回的是自身Promise对象，返回错误信息
                if (typeof value === "object" || typeof value === "function") {
                    if (value === null) {
                        // 如果返回值是null，直接调用resolve函数，promise2的状态变为fulfilled
                        return resolve(value)
                    }
                    try {
                        if (typeof value.then === "function") {
                            // 如果返回值是 Promise 对象或者 thenable 对象
                            // 那就只能交给它们的 then 方法来改变 promise2 的状态，以及获取相对应的状态值
                            // 以下代码等同于 value.then((value) => resolve(value), (err) => reject(err))
                            value.then(resolve, reject)
                        } else {
                            // 如果 then 不是函数，同 null 情况一样的处理逻辑。
                            resolve(value);
                        }
                    } catch (error) {
                        // 出现异常的情况下，调用 reject 函数
                        // promise2 的状态变为 rejected，
                        // 错误信息由下一个 then 方法的第二回调函数接收
                        reject(error);
                    }
                } else {
                    // 如果返回值是其他对象或者原始数据类型值，同 null 情况一样的处理逻辑。
                    resolve(value);
                }
            }
        }

我们使用自己构建的CustomPromise尝试下之前的例子：

const p = new CustomPromise((resolve, reject) => {
            resolve(1);
        });
        const p1 = p.then(value => {
            console.log(value);
            return p1;
        });

发现错误：


截屏2023-10-30 17.27.02.png

发现错误信息不一样，这里根据提示可以知道，我们在p1定义之前就使用了它。实际情况也确实如此，我们先等then方法里面的回调函数执行完毕之后，then方法再返回Promise对象，但我们却在回调函数内先用了这个Promise对象，所以才报这个错误信息。

那怎么解决呢？其实只需要把then方法的回调函数的同步执行改为异步执行就可以了，这里我使用setTimeout进行处理：

then(onFulfilled, onRejected) {
                const promise2 = new CustomPromise((resolve, reject) => {
                    if (this.status === status_Fulfilled) {
                        setTimeout(() => {
                            // 获取上一个then方法的fulfilled回调函数的返回值
                            const v = onFulfilled(this.value)
                            // 根据返回值，改变promise2的状态，并建立与下一个then方法的关系
                            // 将 promise2 传入进行判断
                            this.resolvePromise(promise2, v, resolve, reject)
                        });
                    } else if (this.status === status_Rejected) {
                        setTimeout(() => {
                            // 获取上一个then方法的rejected回调函数的返回值
                            const v = onRejected(this.reason)
                            // 根据返回值，改变promise2的状态，并建立与下一个then方法的关系
                            // 将 promise2 传入进行判断
                            this.resolvePromise(promise2, v, resolve, reject)
                        });
                    } else {
                        // pending 状态下保存回调函数
                        // pending 状态下保存回调函数
                        this.onFulfilledCallbacks.push((value)=>{
                            setTimeout(() => {
                                onFulfilled(value)   
                            })
                        })
                        this.onRejectedCallbacks.push((reason)=>{
                            setTimeout(() => {
                                onRejected(reason)   
                            })
                        })
                    }
                })
                return promise2
            }

测试通过：

        const p = new CustomPromise((resolve, reject) => {
            resolve('1')
        })

        // 返回自身 Promise 对象
        const p1 = p.then(value => {
            console.log(value);
            return p1;
        })

        // 接收错误信息
        p1.then(value => {
            console.log(2);
            console.log('fulfilled', value)
        }, err => {
            console.log(3);
            console.log('reject', err.message);
        })
        // 1
        // 3
        // reject Chaining cycle detected for promise #<Promise

5.5 catch方法实现原理

catch 方法是用于指定发生错误时的回调函数，它其实就是对 then 方法的调用，想想我们之前是通过 then 方法的第二个参数来接收 rejected 状态的错误：

const p = new CustomPromise((resolve, reject) => {
    reject(1);
})
p.then((value) => {
    console.log("fulfilled", value);
}, (reason) => {
    console.log("rejected", reason);
});

// rejected 1

所以，catch 方法等同于 then(null, onRejected) 或 then(undefined, onRejected)，因此实现原理也很明了：


// ...省略部分代码
class CustomPromise {
    // ...省略部分代码
    catch(onRejected) {
        return this.then(null, onRejected);
    }
}

5.5 finally 方法实现原理

finally方法也是一个语法糖，它用于在Promise实例上注册一个处理函数，无论Promise是成功还是失败，该处理函数都会被调用:

class CustomPromise {
  // ...其他代码

  finally(callback) {
    // 调用then方法，传入两个相同的处理函数
    return this.then(
      value => {
        // 创建一个新的Promise实例，确保异步执行callback
        return CustomPromise.resolve(callback()).then(() => value);
      },
      reason => {
        // 创建一个新的Promise实例，确保异步执行callback
        return CustomPromise.resolve(callback()).then(() => { throw reason; });
      }
    );
  }
}

我们看到上面的方法实现中依赖静态的resolve和reject方法，在下面会有介绍。

5.6 Promise.resolve、Promise.reject静态方法

这两个方法可以快速的创建一个已经解决或拒绝的Promise实例：

            static resolve(value) {
                if (value instanceof CustomPromise) {
                    return value
                }
                return new CustomPromise((resolve, reject) => {
                    resolve(value)
                })
            }

            static reject(value) {
                return new CustomPromise((resolve, reject) => {
                    reject(value)
                })
            }

这一步中，我们实现了resolve和reject静态方法，resolve方法接收一个参数：value，用于创建一个已经解决的Promise实例。reject方法接收一个参数：reason，用于创建一个已经拒绝的Promise实例。

上一篇下一篇

猜你喜欢

热点阅读