手写Promise——Day1

最新推荐文章于 2024-08-30 22:17:40 发布
最新推荐文章于 2024-08-30 22:17:40 发布
阅读量161 收藏
点赞数
分类专栏： Promise 文章标签： javascript 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A32626231165165/article/details/123342979
版权

一、resolve与reject代码实现

建议：在看懂后自己多敲两遍，并配合一定例子来进行测试（此笔记的用例均没给出结果，可以和原生Promise的结果进行比对）

代码：

function Promise(executor) { //executor:执行器函数，即同步执行函数
    //给Promise构造函数身上添加两个固定的属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    
​
    const self = this; //将self指向Promise
    function resolve(data) {
        //console.log(this),函数内的this指向的是window
        self.PromiseState = 'fulfilled';
        self.PromiseResult = data;
    }
    /*
    也可以使用箭头函数，是this指向Promise
        const resolve = data => {
            this.PromiseState = 'fulfilled';
            this.PromiseResult = data;
        }
    */
    function reject(data) {
        self.PromiseState = 'rejected';
        self.PromiseResult = data;
    }
    
    executor(resolve, reject);
    
}

测试：

<script>
    let p = new Promise((resolve, reject) => {
        resolve('ok');
        // reject('err');
    })
    p.then(value => {
        console.log(value);
    }, reason => {
        console.warn(reason);
    })
        
    console.log(p);
</script>

二、接收throw抛出异常

一般throw抛出异常时，都用 try...catch...语句接收

代码：

function Promise(executor) { 
    this.PromiseState = 'pending';
    this.PromiseResult = null;
​
    const self = this ;
    function resolve(data) {
        self.PromiseState = 'fulfilled';
        self.PromiseResult = data;
    }
    
    function reject(data) {
        self.PromiseState = 'rejected';
        self.PromiseResult = data;
    }
    //是将函数执行的地方包含起来，而不是将所有代码都包含其中
    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
    
}

测试：

<script>
    let p = new Promise((resolve, reject) => {
        // resolve('ok');
        // reject('err');
        throw 'error';
    })
    p.then(value => {
        console.log(value);
    }, reason => {
        console.warn(reason);
    })
        
    console.log(p);
</script>

三、Promise对象只允许修改一遍

实现此功能，只需加个对Promise对象状态的判断即可

代码：

function Promise(executor) { 
    this.PromiseState = 'pending';
    this.PromiseResult = null;
​
    const self = this ;
    function resolve(data) {
        if (self.PromiseState !== 'pending') return； //此if语句使PromiseState只能修改一次
        self.PromiseState = 'fulfilled';
        self.PromiseResult = data;
    }
    
    function reject(data) {
        if (self.PromiseState !== 'pending') return //此if语句使PromiseState只能修改一次
        self.PromiseState = 'rejected';
        self.PromiseResult = data;
    }
    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
    
}

测试：

<script>
    let p = new Promise((resolve, reject) => {
        resolve('ok');
        reject('err');
    })
    p.then(value => {
        console.log(value);
    }, reason => {
        console.warn(reason);
    })
        
    console.log(p);
</script>

四、then方法回调的同步执行

代码：

Promise.prototype.then = function(onResolved, onRejected) {
    if (this.PromiseState === 'fulfilled') onResolved(this.PromiseResult) //状态为成功时，所执行的回调  
    if (this.PromiseState === 'rejected') onRejected(this.PromiseResult) //状态为失败时，所执行的回调
}

测试：

<script>
    let p = new Promise((resolve, reject) => {
        resolve('ok');
        // reject('err');
    })
    p.then(value => {
        console.log(value);
    }, reason => {
        console.warn(reason);
    })
        
    console.log(p);
</script>

五、then方法回调的异步执行

此处使用定时器来实现异步

代码：

function Promise(executor) { //只写新增加的代码，前面的就不重复写了
    // 添加一个对象属性，用来存储then方法中的两个回调函数
    this.callback = {};
    const self = this;
    function resolve(data) {
        if (self.callback.onResolved) 
            self.callback.onResolved(data);
    }
    function reject(data) {
        if (self.callback.onRejected) 
            self.callback.onRejected(data);
    }
}
​
Promise.prototype.then = function(onResolved, onRejected) {
    if (this.PromiseState === 'fulfilled') onResolved(this.PromiseResult);  
    if (this.PromiseState === 'rejected') onRejected(this.PromiseResult);
    // 当Promise中是异步执行是，会先往下执行then方法，此时状态为'pending'
    if (this.PromiseState === 'pending') {
            this.callback = {
                onResolved,
                onRejected
            }
        /*
        对象的简写形式，相当于:              {onResolved:onResolved,onRejected,onRejected}
        */
}

测试：

<script>
    let p = new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve('ok');
            // reject('err');
        },1000)
    })
    p.then(value => {
        console.log(value);
    }, reason => {
        console.warn(reason);
    })
        
    console.log(p);
</script>

六、指定多个回调执行的实现

多个回调的执行，只需将存储的方式由对象==>数组即可

代码：

function Promise(executor) { 
    this.callback = [];
    const self = this;
    function resolve(data) {
        // 当执行多个回调时使用数组形式来遍历调用
        self.callback.forEach(item => {
            item.onResolved(data);
        })
    function reject(data) {
        // 当执行多个回调时使用数组形式来遍历调用
        self.callback.forEach(item => {
            item.onRejected(data);
        })
}
        
Promise.prototype.then = function(onResolved, onRejected) {
    if (this.PromiseState === 'pending') {
             //往数组中添加只需使用push()方法即可
             this.callback.push({
                onResolved,
                onRejected
             })
}

测试：

<script>
    let p = new Promise((resolve, reject) => {
            resolve('ok');
            // reject('err');
    })
    p.then(value => {
        console.log(value);
    }, reason => {
        console.warn(reason);
    })
    
     p.then(value => {
        alter(value);
    }, reason => {
        console.warn(reason);
    })
        
    console.log(p);
</script>

七、同步修改then方法返回结果的状态

then方法返回：

1.如果回调函数结果是一个非Promise对象，则返回结果是一个成功的Promise

2.如果回调函数结果是一个Promise对象，则返回结果由该Promise对象决定

代码：

Promise.prototype.then = function(onResolved, onRejected) {
    const self = this //注意：函数内的this指向Window！！！
    return new Promise((resolve, reject) => {
        if (this.PromiseState === 'fulfilled') {
            try { // 来对应回调函数通过throw抛出异常
                // console.log(this)
                //获取回调函数执行的结果
                let result = onResolved(self.PromiseResult);
                //如果回调函数执行结果是Promise对象
                if (result instanceof Promise) {
                    result.then(val => {
                        resolve(val); //是val 不是result
                    }, rea => {
                        reject(rea); //是rea 不是result
                    })
                } else {
                    resolve(result); //此处应该返回是回调函数执行结果，而不是resolve函数执行结果
                    // result(this.PromiseResult) 不对
                }
            } catch (e) {
                reject(e);
            }
        } 
        if (this.PromiseState === 'rejected') {
            try { 
                let result = onRejected(self.PromiseResult); 
                if (result instanceof Promise) {
                    result.then(val => {
                        resolve(val);
                    }, rea => {
                        reject(rea);
                    })
                } else {
                    resolve(result);
                }
            } catch (e) {
                reject(e);
            }
        } 
​
        if (this.PromiseState === 'pending') {
            this.callback.push({
                onResolved,
                onRejected
            });
        }
    });
}

测试：

<script>
    let p = new Promise((resolve, reject) => {
            resolve('ok');
            // reject('err');
            // throw 'fail';
    })
    let res = p.then(value => {
        console.log(value);
        // return 123
        /* return new Promise((resolve,reject) =>{
                resolve('okk');
        })
        */
    }, reason => {
        console.warn(reason);
    })
    
    console.log(res);
</script>

八、异步修改then方法返回结果的状态

代码：

Promise.prototype.then = function(onResolved, onRejected) {
    const self = this //注意：函数内的this指向Window！！！
        if (this.PromiseState === 'pending') {
            this.callback.push({
                onResolved: function(){
                    try {
                        let result = onResolved(self.PromiseResult);
                        if (result instanceof Promise) {
                            result.then(val => {
                                resolve(val); 
                            }, rea => {
                                reject(rea);
                            })
                        } else {
                            resolve(result); 
                        }
                    } catch (e) {
                        reject(e);
                    }
                },
                onRejected: function(){
                    try { 
                        let result = onRejected(self.PromiseResult); 
                        if (result instanceof Promise) {
                            result.then(val => {
                                resolve(val);
                            }, rea => {
                                reject(rea);
                            })
                        } else {
                            resolve(result);
                        }
                    } catch (e) {
                        reject(e);
                    }
            });
        }
    });
}

测试：

<script>
    let p = new Promise((resolve, reject) => {
            setTimeout(()=>{
                resolve('ok');
                // reject('err');
                // throw 'fail';
            },1000)
    })
    let res = p.then(value => {
        console.log(value);
        // return 123
        /* return new Promise((resolve,reject) =>{
                resolve('okk');
        })
        */
    }, reason => {
        console.warn(reason);
    })
    
    console.log(res);
</script>

九、部分代码的优化

因为 then 方法返回结果处有大量重复代码，所有封装函数，优化代码

Promise.prototype.then = function(onResolved, onRejected) {
    const self = this;
    return new Promise((resolve, reject) => {
        function callback(type) {
            try {
                let result = type(self.PromiseResult);
                if (result instanceof Promise) {
                    result.then(val => {
                        resolve(val);
                    }, rea => {
                        reject(rea);
                    })
                } else {
                    resolve(result);
                }
            } catch (e) {
                reject(e);
            }
}

以上代码+注释整合：

function Promise(executor) { //executor:执行器函数，即同步执行函数
    //一旦出现thorw语句，则使用 try...catch...来捕获
    //给Promise构造函数身上添加两个固定的属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
        // this.callback = {} //用来保存当Promise里面执行的是异步函数时的then方法中的两个回调
    this.callback = [] //当形式为数组是，则用来绑定多个回调
​
    const self = this; //将self指向Promise
    function resolve(data) {
        // console.log(this) 函数体内的this指向window
        if (self.PromiseState !== 'pending') return; //此if语句使PromiseState只能修改一次
        self.PromiseState = 'fulfilled';
        self.PromiseResult = data;
            // if (self.callback.onResolved) self.callback.onResolved(data) //如果是异步执行，则callback中则会含有onResolved / onRejected
            // 当执行多个回调时使用数组形式来遍历调用
        self.callback.forEach(item => {
            item.onResolved(data);
        })
    }
​
    function reject(data) {
        if (self.PromiseState !== 'pending') return; //此if语句使PromiseState只能修改一次
        self.PromiseState = 'rejected';
        self.PromiseResult = data;
            // if (self.callback.onRejected) self.callback.onRejected(data) //如果是异步执行，则callback中则会含有onResolved / onRejected
            // 当执行多个回调时使用数组形式来遍历调用
        self.callback.forEach(item => {
            item.onRejected(data);
        })
    }
    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}
​
Promise.prototype.then = function(onResolved, onRejected) {
​
    /*
        .then方法返回：
            1.如果回调函数结果是一个非Promise对象，则返回一个成功的Promise
            2.如果回调函数结果是一个Promise对象，则返回结果由该Promise对象决定
    */
    const self = this
    return new Promise((resolve, reject) => {
        function callback(type) {
            try {
                //获取回调函数执行的结果
                // console.log(this),注意：函数内的this指向Window！！！
                let result = type(self.PromiseResult);
                    //如果回调函数执行结果是Promise对象
                if (result instanceof Promise) {
                    result.then(val => {
                        resolve(val); //是val 不是result
                    }, rea => {
                        reject(rea); //是rea 不是result
                    })
                } else {
                    resolve(result); //此处应该返回是回调函数执行结果，而不是resolve函数执行结果
                        // result(this.PromiseResult) 不对
                }
            } catch (e) {
                reject(e);
            }
        }
        if (this.PromiseState === 'fulfilled') callback(onResolved); //Promise成功时所执行的回调
        if (this.PromiseState === 'rejected') callback(onRejected); //Promise失败时所执行的回调
​
        //下面为当Promise里面是异步函数时所对应情况
        if (this.PromiseState === 'pending') {
            // this.callback = {
            //     onResolved,
            //     onRejected
            //     //对象的简写形式，相当于{onResolved:onResolved,onRejected,onRejected}
            // }
​
            // this.callback.push({
            //     onResolved,
            //     onRejected
            // })
​
            //异步修改then的返回结果
            this.callback.push({
                onResolved: function() {
                    callback(onResolved);
                },
                onRejected: function() {
                    callback(onRejected);
                }
            })
        }
    })
}
三年ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS笔试题精讲3 ES6专题
m0_38066007的博客
04-24 612
es6
从10个角度来检测自己是不是一个合格的前端工程师，这些要求你都达到了吗？
BOM485480的博客
04-10 907
开篇 前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到： 到现在为止，前端工程师已经成为研发体系中的重要岗位之一。可是，与此相对的是，我发现极少或者几乎没有大学的计算机专业愿意开设前端课程，更没有系统性的教学方案出现。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。 这样是...
手写Promise——Day2
A32626231165165的博客
03-09 113
此文章摘录了手写Promise一些方法的底层实现原理，如catch、resolve、reject方法等
js 延时执行代码的最佳实践 —— 自定义 sleep 函数
朝阳39的博客
05-23 273
可见 setTimeout 是 js 的一种异步机制，它并不会阻塞同步代码的执行，具体的执行机制，详见 js【深度解析】代码的执行顺序。setTimeout 仅适用于简单的、一次性延迟，若需要实现串行延时，还需要使用递增时长来实现（需自行计算累计时长，逻辑不够直观）这是最传统的实现 sleep 的方法，确实实现了延时，但会阻塞整个线程，可能会冻结UI或导致程序崩溃，js 延时执行代码的第一想法是使用 setTimeout，但它的效果可能和你想的不一样。附赠 print 的代码。
【手写】Promise
Voiceu的博客
06-21 151
根据尚硅谷promise讲解视频写的 链接 es5 function构造函数版，使用setTimeout模拟异步，但实际上promise应该是微任务 /* 疑难点 1.为什么要进行保存this 首先理清整个运行的逻辑，首先let p = new Promise(excutor)这个时候， 会自动执行Promise函数里面的内容，当走到this.PromiseState = 'pending'，没有问题，this是实例对象p 但是当走到excutor(
手写一个Promise（3）
eswang的CSDN博客
02-14 137
前言 then还没有写好。。。 then链式异常 then的链式处理我们要对reject做一定的修改。 if (this.status === Eswang.FUFILLED) { setTimeout(() => { try { let result = onFufilled(this.val); ...
Node第一天学习总结—— Node.js与内置模块(Node.js 简介、fs文件系统模块、path 路径模块、http模块)
weixin_52819925的博客
08-24 685
(一)Node.js简介 1. Node.js Node.js是一个基于 Chrome V8 引擎的 JavaScript运行环境。 Node.js 的官网地址： https://nodejs.org/zh-cn/ 2. Node.js中的 JavaScript 运行环境 3. Node.js 可以做什么 Node.js作为一个JavaScript 的运行环境，仅仅提供了基础的功能和 API。然而，基于Node.js 提供的这些基础能，很多强大的工具和框架如雨后春笋，层出不穷，所以学会了Node.js，可
前端主流面试官必问超详细面试题(整理完以秃头)持续更新中
qq_43375584的博客
07-07 3942
CDN利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。CDN的作用：（1）在性能方面，引入CDN的作用在于：（2）在安全方面，CDN有助于防御DDoS网络攻击：懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。 比如：在较长的网页中。如果有很多图片，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果我们使用图片的懒加载就可以解决
由浅入深 65个JS常考面试题
马小兜要努力呀
07-23 1145
由浅入深逐个击破 JS常考面试题（上篇） 1、 介绍一下JS的基本数据类型，值是如何存储的？ JavaScript一共有8种数据类型，其中有7种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol（es6新增，表示独一无二的值）和BigInt（es10新增）； 一种引用类型Object（本质上是由一组无序的名值对组成的），里面包含function、Array、Date，JS不支持任何自定义类型的机制，所有的值都是上述的八种数据类型之一。 如何存储？？？ 基本数
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 9567
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
jQuery基础——DOM
m0_54066656的博客
08-27 1816
JQ基础——DOM操作
vue ref和reactive区别
灰海
08-25 4966
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 1252
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 651
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 167
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
echarts组件——饼图
weixin_42255789的博客
08-28 276
饼图
SpringBoot SSM vue在线作业考试系统
最新发布
yinjl123456的博客
08-30 295
使用技术: SpringBoot或SSM + Mybaits + Mysql + vue(前端)后台管理 登录注册 个人中心 教师信息管理 学生信息管理 学院信息管理 专业信息管理。班级信息管理 作业信息管理 作业提交管理 通知公告管理 试卷管理 试题管理。系统管理 管理员管理 考试管理。
Vue3搭建pinia环境
weixin_73060959的博客
08-28 895
在Vue 3中，Pinia 是 Vuex 的后续状态管理库，旨在提供 Vuex 5 中相似的功能，但具有更简洁的API、更好的TypeScript支持和模块热重载（HMR）等特性。
手写promise面试
01-08
手写Promise面试是一个通过手写代码来展示对Promise的理解和掌握程度的面试环节。在面试中，面试官往往会要求面试者用纸笔手写一个简单的Promise实现，或者是解答一些与Promise相关的问题。 首先，面试者需要熟悉...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三年ing

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值