一共八步，带你实现 Promise

于 2023-08-27 12:09:19 发布
阅读量128 收藏 1
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51431277/article/details/132522020
版权

第一步 : 实现Promise的雏形

        class Commitment {
            static PENDING = '待定'
            static FULFILLED = '成功'
            static REJECTED = '拒绝'
            
            constructor(func) {
                this.status = Commitment.PENDING
                this.result = null
                func(this.resolve,this.reject)
            }

            resolve(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.FULFILLED
                    this.result = result
                }
            }

            reject(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.REJECTED
                    this.result = result
                }
            }
        }   
        */

存在问题:

  1. error : 找不到 status，原因在于在 resolve 方法中，我们在 constructor外面使用了 this.status 。
  2. 这里的 this 并没有指向 promise 实例，而是指向了构造函数的原型对象，因此我们要给 resolve 和 reject 绑定 this 。

第二步 : 绑定 this,让 resolve 和 reject 方法中的 this 恒为 promise 实例

		class Commitment {
            static PENDING = '待定'
            static FULFILLED = '成功'
            static REJECTED = '拒绝'
            
            constructor(func) {
                this.status = Commitment.PENDING
                this.result = null
                func(this.resolve.bind(this),this.reject.bind(this))
            }

            resolve(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.FULFILLED
                    this.result = result
                }
            }

            reject(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.REJECTED
                    this.result = result
                }
            }
        }

第三步 : 实现then方法

 		class Commitment {
            static PENDING = '待定'
            static FULFILLED = '成功'
            static REJECTED = '拒绝'
            
            constructor(func) {
                this.status = Commitment.PENDING
                this.result = null
                func(this.resolve.bind(this),this.reject.bind(this))
            }

            resolve(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.FULFILLED
                    this.result = result
                }
            }

            reject(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.REJECTED
                    this.result = result
                }
            }

            then(onFulfilled,onReject){
                if(this.status === Commitment.FULFILLED) {
                    onFulfilled(this.result)
                }

                if(this.status === Commitment.REJECTED) {
                    onReject(this.result)
                }
            }
        }

        let p = new Commitment((resolve,reject) => {
            resolve('123')
        })

        console.log(p)

第四步 : try catch 捕获错误

         class Commitment {
            static PENDING = '待定'
            static FULFILLED = '成功'
            static REJECTED = '拒绝'
            
            constructor(func) {
                this.status = Commitment.PENDING
                this.result = null
                try {
                    func(this.resolve.bind(this),this.reject.bind(this))
                } catch (error) {
                    this.reject(error)
                }
                
            }

            resolve(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.FULFILLED
                    this.result = result
                }
            }

            reject(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.REJECTED
                    this.result = result
                }
            }

            then(onFulfilled,onReject){
                if(this.status === Commitment.FULFILLED) {
                    onFulfilled(this.result)
                }

                if(this.status === Commitment.REJECTED) {
                    onReject(this.result)
                }
            }
        }

第五步，then的两个参数未必都传入函数，解决传入其他数据类型数据报错的问题

		class Commitment {
            static PENDING = '待定'
            static FULFILLED = '成功'
            static REJECTED = '拒绝'
            
            constructor(func) {
                this.status = Commitment.PENDING
                this.result = null
                try {
                    func(this.resolve.bind(this),this.reject.bind(this))
                } catch (error) {
                    this.reject(error)
                }
                
            }

            resolve(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.FULFILLED
                    this.result = result
                }
            }

            reject(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.REJECTED
                    this.result = result
                }
            }

            then(onFulfilled,onReject){
                onFsulfilled = typeof onFulfilled === "function" ? onFulfilled : () => {}
                onReject = typeof onReject === "function" ? onReject : () => {}

                if(this.status === Commitment.FULFILLED) {
                    onFulfilled(this.result)
                }

                if(this.status === Commitment.REJECTED) {
                    onReject(this.rsesult)
                }
            }
        }

        let p = new Commitment((resolve,reject) => {
            resolve('123')
        })

        console.log(p)

第六步，Promise 是如何实现异步的，通过定时器setTimeout

注意：promise 本身属于同步任务，then、catch、finaly 属于异步任务

		class Commitment {
            static PENDING = '待定'
            static FULFILLED = '成功'
            static REJECTED = '拒绝'
            
            constructor(func) {
                this.status = Commitment.PENDING
                this.result = null
                try {
                    func(this.resolve.bind(this),this.reject.bind(this))
                } catch (error) {
                    this.reject(error)
                }
                
            }

            resolve(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.FULFILLED
                    this.result = result
                }
            }

            reject(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.REJECTED
                    this.result = result
                }
            }

            then(onFulfilled,onReject){
                onFsulfilled = typeof onFulfilled === "function" ? onFulfilled : () => {}
                onReject = typeof onReject === "function" ? onReject : () => {}

                if(this.status === Commitment.FULFILLED) {
                    setTimeout(() => {
                        onFulfilled(this.result)
                    })
                }

                if(this.status === Commitment.REJECTED) {
                    setTimeout(() => {
                        onReject(this.rsesult)
                    })
                    
                }
            }
        }

第七步: 实现 resolve 之前无法执行 then

具体的实现为:

  1. 创建this.resolveCallbacks=[]保存resolve的执行结果
  2. 创建this.rejectCallbacks=[]保存reject的执行结果
  3. 在then里，判断当前状态为待定时，将对应的函数onFULFILLED,onREJECT都push到对应数组中
    之后在resolve和reject里遍历数组
  4. 这里还有一个坑，resolve和reject在事件循环末尾执行，所以要在resolve和reject里加上setTimeout
 		class Commitment {
            static PENDING = '待定' 
            static FULFILLED = '成功'
            static REJECTED = '拒绝'
            
            constructor(func) {
                this.status = Commitment.PENDING
                this.result = null
                this.resolveCallbacks = []
                this.rejectCallbacks = []
                try {
                    func(this.resolve.bind(this),this.reject.bind(this))
                } catch (error) {
                    this.reject(error)
                }
                
            }

            resolve(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.FULFILLED
                    this.result = result
                    this.resolveCallbacks.forEach((cb) => {
                        cb(result)
                    })
                }
            }

            reject(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.REJECTED
                    this.result = result
                    this.rejectCallbacks.forEach((cb) => {
                        cb(result)
                    })
                }
            }

            then(onFulfilled,onReject){
                onFsulfilled = typeof onFulfilled === "function" ? onFulfilled : () => {}
                onReject = typeof onReject === "function" ? onReject : () => {}

                if(this.status === Commitment.PENDING) {
                    this.resolveCallbacks.push(onFulfilled)
                    this.rejectCallbacks.push(onReject)
                }

                if(this.status === Commitment.FULFILLED) {
                    setTimeout(() => {
                        onFulfilled(this.result)
                    })
                }

                if(this.status === Commitment.REJECTED) {
                    setTimeout(() => {
                        onReject(this.rsesult)
                    })
                    
                }
            }
        }

第八步，实现链式调用，将then中的逻辑重新包裹为一个Commitment实例并返回即可

		class Commitment {
            static PENDING = '待定' 
            static FULFILLED = '成功'
            static REJECTED = '拒绝'
            
            constructor(func) {
                this.status = Commitment.PENDING
                this.result = null
                this.resolveCallbacks = []
                this.rejectCallbacks = []
                try {
                    func(this.resolve.bind(this),this.reject.bind(this))
                } catch (error) {
                    this.reject(error)
                }
                
            }

            resolve(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.FULFILLED
                    this.result = result
                    this.resolveCallbacks.forEach((cb) => {
                        cb(result)
                    })
                }
            }

            reject(result){
                if(this.status === Commitment.PENDING) {
                    this.status = Commitment.REJECTED
                    this.result = result
                    this.rejectCallbacks.forEach((cb) => {
                        cb(result)
                    })
                }
            }

            then(onFulfilled,onReject){

                return new Commitment((resovle,reject) => {
                    onFsulfilled = typeof onFulfilled === "function" ? onFulfilled : () => {}
                    onReject = typeof onReject === "function" ? onReject : () => {}

                    if(this.status === Commitment.PENDING) {
                        this.resolveCallbacks.push(onFulfilled)
                        this.rejectCallbacks.push(onReject)
                    }

                    if(this.status === Commitment.FULFILLED) {
                        setTimeout(() => {
                            onFulfilled(this.result)
                        })
                    }

                    if(this.status === Commitment.REJECTED) {
                        setTimeout(() => {
                            onReject(this.rsesult)
                        })
                        
                    }
                })
            }
        }

验证:

		
		console.log('1')

        let promise = new Commitment((resolve,reject)=>{
            console.log('2')
            setTimeout(()=>{
                resolve('5')
                console.log('4')
            })
        })
        promise.then(
            result =>{
            console.log('执行')
                
                console.log(result)}
        )
        console.log('3')

        // 输出结果为 12345
WongLeer
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Promise 实现 （从简易版到符合Promise A+规范）
老司机的后备箱
01-10 530
手写 Promise 是面试的时候大家都逃避的送命题，在学些了解后发现通过实现源码更能将新一代的异步方案理解的通透，知其然知其所以然的运用。如果直接将源码贴到此处势必不能有更大的收获，下面就按实现版本来看做简要分析。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
Promise的实现
qq_39039128的博客
05-13 279
const PENDING = 'pending' const FULFILLED = 'fulfilled' const REJECTED = 'rejected' function Promise(executor){ let self = this self.state = PENDING self.value = null self.reason = null self.onFulfilledCallbacks = [] self.onReject.
实现一个自己的promise
大～熊
03-29 3267
本文将探讨Promise的实现。 一、ES6中的Promise1、简介据说js很早就实现了Promise，我是不知道的，我第一次接触Promise就是在ES6中。Promise就是规定在未来达到某个状态时应该采取某种行动，而这种未来的状态是不确定的。阮一峰说Promise对象用来传递异步消息，代表了某个未来才会知道结果的事件，并为这个事件提供统一的API，供进一步处理。
实现Promise
changan1999的博客
03-07 94
在编写之前首先要了解一下promise有哪些特性: 构造函数有一个函数executor里面包含两个参数（resolve,reject） resolve成功时执行成功的回调 reject失败时执行失败的回调 三种状态 pending（初始状态） fulfilled（操作成功） rejected（操作失败） Promise对象的then方法 1 实现Promise方法里面的函数 class Promise{ /*构造函数里面的参数*/ constructor(executor){
Promise实现
Pan Fengshan的博客
06-06 244
实现Promise功能 代码如下： var Promise = (function() { function Promise() { this.callbacks = []; } Promise.prototype = { constructor: Promise, resolve: function(result) { this.complete('resolve', ...
电影票自动抢票实现逻辑与代码
02-06
1. **网络爬虫**：自动抢票的第一步通常是获取票务信息，这需要通过网络爬虫来抓取网站的数据。网络爬虫是通过模拟浏览器行为，发送HTTP请求到服务器并解析响应内容来获取网页信息的程序。在大麦网的场景下，爬虫...
ReactNative开发实例带你入门reactnative开发
08-10
8. **发布与更新**：最后，学习如何打包应用并提交到App Store或Google Play，以及如何通过热更新技术如CodePush实现实时部署和更新，将确保你的应用能够顺利地到达用户手中。 通过“React Native开发实例带你入门...
OA工作流WorkFlow版本(前台JS实现)
01-30
- `readme.txt`：一般包含项目介绍、安装指南、使用注意事项等内容，是了解项目的第一步。 - `src`：源代码目录，可能包含了JavaScript文件、样式表（CSS）、图片和其他前端资源，用于构建和实现工作流功能。 - `...
挑战带回家
02-17
通过"挑战带回家"这样的项目，你可以逐一攻克上述知识点，通过实践来深化理解，并逐步提升JavaScript编程技能。在每个挑战中，尝试多种解决方案，理解每种方法的优缺点，这样不仅能增强解决问题的能力，还能培养良好...
nodejs-alura:Node js的第一步
04-02
这个项目作为Node.js的初步学习资源，将引导你迈出在后端开发领域的第一步。 1. **Node.js简介**： Node.js是由Ryan Dahl于2009年创建的，它的设计思想是让JavaScript运行在服务端，实现全栈JavaScript开发。Node....
promise实现
weixin_30500473的博客
07-31 77
目录 promise实现 Promise 是 ES6 新增的语法，解决了回调地狱的问题。 可以把 Promise 看成一个状态机。初始是 pending 状态，可以通过函数 resolve 和 reject ，将状态转变为 resolved 或者 rejected 状态，状态一旦改变就不能再次变化。 then 函数会返回一个 Promi...
实现一个简单的Promise
weixin_39360915的博客
07-30 681
我们可以在chrome开发工具下看下原生 promise 是什么：new Promise((resolve, reject) => {}) return Promise { [[PromiseStatus]]: "pending", [[PromiseValue]]: undefined }可以看出Promise 实例有两个property，一个表示status一个为value所以我们可以这样写P
简单实现一个Promise
roamingcode的博客
08-23 474
Promise 实现
promise的实现
黑黑黑眼圈博客
03-31 266
1.promise的声明 首先promise是一个类，那么就用 class声明。 由于new promise((resolve,reject)=>{}),所以传入一个参数，我们叫它executor，传入立即执行。 resolved、reject可执行，所以都是函数，我们用let声明。 class promise{ constructor(executor){ let resolve...
Promise的简单实现
gzc的博客
01-12 562
Promise的简单实现 Promise本意是承诺.主要目的是为了解决在需要多个异步操作的时候.产生的回调嵌套.在es6没出来前.用bluebird来实现.与javas中的Q模块类似. Promise对象实例创建的过程中有三种状态, Pending、Fulfilled、Rejected. Fulfilled与Rejected间不能相互转换 promise的使用与原理实现
promise简单实现
qq_39692513的博客
06-16 946
promise简单实现
Promise（手动实现）
风起
09-25 806
文章目录1. `Promise`1.1 `Promise` 的 基本使用1.1.1 创建1.1.2 静态方法1.1.3` then`、`catch`1.1.4 `finally`1.2 `Promise`实现1.2.1 确定成员函数和成员变量1.2.2 准备工作1.2.3 定义状态1.2.4 定义`MP`的结构1.2.5 实现`MpPrototype`1.2.5.1 实现`resolve`和`reject`函数1.2.5.2 实现`then`1.2.5.3 进一步完善`resolve`和`reject`函数
掌握51单片机I/O口：4步带你入门
这种巧妙的布局使得单片机能够在节省引脚的同时，实现高效的数据传输和控制。 深入理解单片机I/O端口的结构，如P0口的示例所示，有助于我们掌握其工作原理。该端口包括输出锁存器、输入缓冲器和输出驱动电路，以及...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

WongLeer

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

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

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

打赏作者

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

抵扣说明：

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

余额充值