手写promise 对promise更详细的理解

2023-10-17 16:01:28

首先还是上应用层的promise代码

以便对结构的理解

let remember = true;
        let getMoney = new Promise((resolve,reject)=>{
            if(remember){
                let money = 999
                resolve(money)
            }else{
                let noMoney = new Error('今年你已经毕业了,没有红包了');
                reject(noMoney)
            }
        })

        let test = function(){
            getMoney.then((fulfilled)=>{
                console.log(fulfilled);
            }).catch((rejected)=>{
                console.log(rejected.message);
            })
        }

        test()

基本结构

这里我们可以看出一个promise实例

我们需要知道他的状态一开始为panding 待处理状态

如果成功返回一个值

如果失败返回错误原因

由应用层代码来看

需要一个处理成功的方法resolve 和处理失败的方法reject

还有一个.then的方法（.catch方法实质上就是.then方法的另一种写法搭架子时候暂时忽略）

我们每构造一个新promise实例都要用到then方法那么我们把then写在我们自己构造的promise原型中构造函数可以继承使用

理清逻辑架子为

function myPromise(){
            let self = this; //接收当前内容
            self.status = 'pending'; //状态
            self.value = null; //成功之后,返回的数据
            self.reason = null; //失败了,失败的原因

            //返回成功的结果
            function resolve(){

            }

            //返回失败的原因
            function reject(){

            }


        }
        //2.then()
        myPromise.prototype.then = function(){

        }

        //3.初级调用
        let demo = new myPromise((resolve,reject)=>{
            console.log("111");
        })

当然到了这里这个111是打印不出来的显而易见没有调用

function myPromise(excutor){
            let selt = this; //接收当前内容
            self.status = 'pending'; //状态
            self.value = null; //成功之后,返回的数据
            self.reason = null; //失败了,失败的原因

            //返回成功的结果
            function resolve(){

            }

            //返回失败的原因
            function reject(){

            }
            try {
                excutor(resolve,reject)
            } catch (error) {
                reject(error)
            }

        }

所以我们补全代码传入一个执行器excutor 执行器方法也是调用resolve reject

当我们运用new Promise时候传两个参数 resolve reject 这效果是一样的同步立即执行

之后进行进一步的完善

function resolve(value){
                //5.1
                if(self.status === 'pending'){
                    self.value = value //保存成功的结果
                    self.status = 'fulfilled' //状态更改
                }
            }

            //返回失败的原因
            function reject(reason){
                //5.2
                if(self.status === 'pending'){
                    self.reason = reason //失败原因
                    self.status = 'rejected' //状态更改
                }
            }

初始状态肯定为pending待处理然后开始完善resolve 和 reject方法

成功即保存结果失败即抛出原因

当然此时的状态也要随之改变为fulfilled或者rejected

无论成功与否下面就要进入到then方法里

//6.确保传进来的是方法 如果不是的话  定义一个方法
            myFulfilled = typeof myFulfilled === 'function' ? 
            myFulfilled : function(data) { resolve(data) }
            myRejceted = typeof myRejected === 'function' ? 
            myRejected : function(err) { throw err }

then方法写完就要开始实现如何实现异步操作 Promise是一个比较好的异步操作方法当然异步也要考虑进去

//7.暂存区
            self.fulfilledBack = [];
            self.rejectBack = [];

先定义一个暂存区这个暂存也是在then方法里存

因为由应用层代码可以看出 promise实例进行.then方法之后才可执行相应操作

let self = this;
            
            if(self.status === 'pending'){
                self.fulfilledBack.push(myFulfilled);
                self.rejectedBack.push(myReject);

            }

暂存之后的数据要取出当成功时候在resolve取出失败时候在reject取出

function resolve(value){
                //5.1
                if(self.status === 'pending'){
                    self.value = value //保存成功的结果
                    self.status = 'fulfilled' //状态更改

                    //9.状态发生改变 => 依次取出
                    self.fulfilledBack.forEach(item => item(value))
                }
            }

            //返回失败的原因
            function reject(reason){
                //5.2
                if(self.status === 'pending'){
                    self.reason = reason //失败原因
                    self.status = 'rejected' //状态更改
                    self.rejectedBack.forEach(item => item(reason))

                }
            }

这样继续完善resolve方法和 reject 方法

到这里就算是结束了

如果有需要我把整个代码放过来自提

<!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>手写promise</title>
</head>
<body>
    <h2>手写promise</h2>
    <script>
        function myPromise(excutor){
            let self = this; //接收当前内容
            self.status = 'pending'; //状态
            self.value = null; //成功之后,返回的数据
            self.reason = null; //失败了,失败的原因
            //7.暂存区
            self.fulfilledBack = [];
            self.rejectedBack = [];

            //返回成功的结果
            function resolve(value){
                //5.1
                if(self.status === 'pending'){
                    self.value = value //保存成功的结果
                    self.status = 'fulfilled' //状态更改

                    //9.状态发生改变 => 依次取出
                    self.fulfilledBack.forEach(item => item(value))
                }
            }

            //返回失败的原因
            function reject(reason){
                //5.2
                if(self.status === 'pending'){
                    self.reason = reason //失败原因
                    self.status = 'rejected' //状态更改
                    self.rejectedBack.forEach(item => item(reason))

                }
            }
            //4.excutor =>立即执行
            try {
                excutor(resolve,reject)
            } catch (err) {
                reject(err)
            }

        }
        //2.then()
        myPromise.prototype.then = function(myFulfilled,myRejected){
            //6.确保传进来的是方法 如果不是的话  定义一个方法
            myFulfilled = typeof myFulfilled === 'function' ? 
            myFulfilled : function(data) { resolve(data) }
            myRejected = typeof myRejected === 'function' ? 
            myRejected : function(err) { throw err }

            let self = this;
            
            //8.暂存回调函数
            if(self.status === 'pending'){
                self.fulfilledBack.push(myFulfilled);
                self.rejectedBack.push(myRejected);

            }
        }

        //3.初级调用
        let demo = new myPromise((resolve,reject)=>{
            console.log("111")
            setTimeout(() => {
                resolve(222)
            }, 2000);
        })
        //console.log(demo);
        let test = function() {
            demo.then((data)=>{
                console.log(data)
                })
        }
        test()
        

        
        
    </script>
</body>
</html>

如果对手写的原理层代码感觉有问题可以对照这个应用层代码代码在文章最开始有这是对应用层代码的解释

https://blog.csdn.net/qq_45158336/article/details/122782823

码农公寓

相关文章