js手写Promise（上）

目录

  • 构造函数
    • resolve与reject
    • 状态改变
      • 状态改变后就无法再次改变
    • 代码优化
    • 回调函数中抛出错误
  • then
    • onFulfilled和onRejected的调用时机
    • 异步then
    • 多个then

如果是不知道或者对Promise不熟悉的铁铁可以先看我这篇文章
Promise

构造函数

在最开始，我们先不去考虑Promise内部是怎么实现，而是先将自己的Promise声明出来，这里我使用ES6的class来声明

class MyPromise {}

在我们new一个Promise的时候会传入一个回调函数，这个回调函数有两个形参，一个resolve，一个reject，这个函数将交给Promise来立即执行，所以我们的constructor可以这么写

class MyPromise {constructor(func) {func(resolve, reject)}
}

值得注意的是，Promise本身就是一个任务，而回调函数表示的是任务的执行过程，所以constructor中的形参应该叫executor而不是func

class MyPromise {constructor(executor) {executor(resolve, reject)}
}

resolve与reject

resolve和reject也是函数，那么这两个函数定义在哪呢，有2种方案

  1. 定义在constructor中

    constructor(executor) {const resolve = (data) => {}const reject = (reason) => {}executor(resolve, reject)
}

  2. 将其变为原型方法

    class MyPromise {
constructor(executor) {func(this.#resolve, this.#reject)
}
#reject(reason) { }
#resolve(data) { }
}

    因为这个函数我们只会在类的内部使用，并不希望用户能在外部访问，所以我们将它定义为私有成员
    只不过这么写的话会有this的指向问题，我们需要使用强制绑定来将函数绑定到正确的地方

    class MyPromise {
constructor(executor) {func(this.#resolve.call(this), this.#reject.call(this))
}
#reject(reason) { }
#resolve(data) { }
}

这里我选择第一种方法

状态改变

现在我们声明了resolve与reject两个函数，但具体这两个函数做什么我们并不清楚，事实上这两个函数做的都是同一件事，改变当前Promise实例的状态与值，只不过resolve是将当前实例的状态改为fulfilled，而reject是将当前实例的状态改为rejected，明白了这一点我们就能写出如下代码

class MyPromise {#state = "pending"#value = nullconstructor(executor) {const resolve = (data) => {this.#state = "fulfilled"this.#value = data}const reject = (reason) => {this.#state = "rejected"this.#value = reason}executor(resolve, reject)}
}

我们声明了两个私有属性，无论是state还是value我们都不希望用户能从外部访问，state用于记录当前实例的状态，而value用于记录当前实例得到的值

状态改变后就无法再次改变

这么写就完了吗？当然没有，在Promise中状态一旦确定就不能再更改，反映到代码层面就是无论是在回调函数中写多少个resolve和reject，Promise都只会执行第一个，而我们的Promise中目前并没有实现这个功能

const resolve = (data) => {if (this.#state !== "pending") returnthis.#state = "fulfilled"this.#value = data
}
const reject = (reason) => {if (this.#state !== "pending") returnthis.#state = "rejected"this.#value = reason
}

我们在resolve和reject上都加了一行判断，如果当前实例的state不是pending的话就说明状态已经改变，不能再继续执行
写到这里我们发现resolve和reject函数中的重复代码有点多，所以我们可以将其封装成一个独立的函数

class MyPromise {#state = "pending"#value = nullconstructor(executor) {const resolve = (data) => {this.#changeState("fulfilled", data)}const reject = (reason) => {this.#changeState("rejected", reason)}executor(resolve, reject)}#changeState(state, value) {if (this.#state !== "pending") returnthis.#state = statethis.#value = value}
}

代码优化

现在我们发现在我们的代码中还存在着一些硬编码的部分，如状态不应该直接使用字符串而是需要使用变量存起来，这样如果以后状态的名称发生改变，我们也就只需要更改变量的内容

class MyPromise {#state = "pending"#value = nullstatic #PENDING = "pending"static #FULFILLED = "fulfilled"static #REJECTED = "rejected"constructor(executor) {const resolve = (data) => {this.#changeState(MyPromise.#FULFILLED, data)}const reject = (reason) => {this.#changeState(MyPromise.#REJECTED, reason)}executor(resolve, reject)}#changeState(state, value) {if (this.#state !== MyPromise.#PENDING) returnthis.#state = statethis.#value = value}
}

我们将三种状态用变量存起来，因为三个状态只会在内部使用而且每个实例都会拥有这三个状态，所以我将其定义为静态私有成员

回调函数中抛出错误

现在大部分问题我们都解决了，但是在回调函数中抛出错误的情况我们并没有处理，在Promise中如果回调函数中抛出了错误会被Promise内部捕获到，直接reject，那么我们的代码就可以这么写

constructor(executor) {const resolve = (data) => {this.#changeState(MyPromise.#FULFILLED, data)}const reject = (reason) => {this.#changeState(MyPromise.#REJECTED, reason)}try {executor(resolve, reject)} catch (error) {reject(error)}
}

至此我们就将MyPromise的构造器部分完成了

then

在PromiseA+规范中通篇都在说什么是Promise，简单地说就是Promise可以是一个对象或者是函数，但无论是什么都必须要有then方法，如果有then方法那就是Promise
所以then方法是Promise中的核心，同时也是手写Promise中最难的一部分，如果能将then方法手写出来那整个Promise就可以算是大部分完成了
我们回忆一下Promise中的then方法，发现then方法会传入两个参数，一个是成功时的回调函数，一个是失败时的回调函数，那我们可以这么定义

class MyPromise {then(onFulfilled, onRejected) {return new MyPromise((resolve, reject) => {})}
}

因为then方法是每个实例都拥有并且用到的，所以我们将其定义为成员方法，为了实现Promise的链式调用所以then方法必须返回一个Promise，那么在这个返回的Promise中，我们究竟该做些什么呢

onFulfilled和onRejected的调用时机

onFulfilled和onRejected什么时候调用，这个问题很好解决，依据当前Promise的状态判断是调用onFulfilled还是onRejected

then(onFulfilled, onRejected) {return new MyPromise((resolve, reject) => {if (this.#state === MyPromise.#FULFILLED) onFulfilled(this.#value)if (this.#state === MyPromise.#REJECTED) onRejected(this.#value)})
}

这么写似乎并没有什么问题，那我们来测试一下

let p1 = new MyPromise((resolve, reject) => {resolve(123)
})
let p2 = new MyPromise((resolve, reject) => {setTimeout(() => {resolve(456)}, 1000)
})
p1.then(data => {console.log(data)
})
p2.then(data => {console.log(data)
})

结果
看得出来，p1成功运行了，但p2似乎有点问题，因为p2在运行到then的时候p2的状态还是pending，p2的状态会在一秒钟后才改变，但then方法早在这之前就调用了，所以为了避免这种情况，我们需要在状态改变的时候再次调用then方法

异步then

再次调用then方法说起来并不精确，我们其实真正想要的并不是调用then方法，而是想要在状态改变的时候调用onFulfiled或者onRejected，那么第一个问题就来了，我们在哪里能知道状态什么时候被改变了？答案是changeState
changeState是用来改变当前实例的状态的函数，当它第一次运行时状态肯定被改变，我们只需要在这里调用onFulfilled或者onRejected，但是有一个新问题，这两个回调函数都是直接传入then中的，我们无法在changeState中拿到这两个函数，那该怎么办呢？我们可以用一个中间变量存储

class MyPromise {#handler = {}#changeState(state, value) {if (this.#state !== MyPromise.#PENDING) returnthis.#state = statethis.#value = valueif (this.#state === MyPromise.#FULFILLED) this.#handler.onFulfilled(this.#value)else if (this.#state === MyPromise.#REJECTED) this.#handler.onRejected(this.#value)}then(onFulfilled, onRejected) {return new MyPromise((resolve, reject) => {if (this.#state === MyPromise.#FULFILLED) onFulfilled(this.#value)else if (this.#state === MyPromise.#REJECTED) onRejected(this.#value)else this.#handler = {onFulfilled,onRejected,resolve,reject}})}
}

这样问题就解决了，但这里面的重复代码有点多，我们可以将其封装成一个函数

class MyPromise {#changeState(state, value) {if (this.#state !== MyPromise.#PENDING) returnthis.#state = statethis.#value = valuethis.#run()}then(onFulfilled, onRejected) {return new MyPromise((resolve, reject) => {this.#handler = {onFulfilled,onRejected,resolve,reject}this.#run()})}#run() {if (this.#state === MyPromise.#FULFILLED) {this.#handler.onFulfilled(this.#value)}else if (this.#state === MyPromise.#REJECTED) {this.#handler.onRejected(this.#value)}}}

我们封装了一个run函数，这个函数专门用来执行then的回调，我们还是用上面那个代码测试
结果
至此异步then问题解决

多个then

有时我们会在一个实例上多次调用then方法，在实例的状态改变后这些then方法的回调函数应该继续执行，但我们的代码却并没有实现
多个then就意味着handler不是一个对象而是一个数组，run方法也不再调用一个handler，而是遍历handlers，将对应状态的回调函数全都取出来执行

class MyPromise {#handlers = []then(onFulfilled, onRejected) {return new MyPromise((resolve, reject) => {this.#handlersPush(onFulfilled, onRejected, resolve, reject)this.#run()})}#run() {if (this.#state === MyPromise.#PENDING) returnwhile (this.#handlers.length > 0) {const handler = this.#handlers.shift()if (this.#state === MyPromise.#FULFILLED) {handler.onFulfilled(this.#value)}else if (this.#state === MyPromise.#REJECTED) {handler.onRejected(this.#value)}}}#handlersPush(onFulfilled, onRejected, resolve, reject) {this.#handlers.push({onFulfilled,onRejected,resolve,reject})}
}

我们封装了一个辅助函数用于向handlers放入回调，在run中我们会一直在handlers里取出回调执行，我们使用以下代码测试

let p1 = new MyPromise((resolve, reject) => {resolve(123)
})
p1.then(data => {console.log("第一个then" + data)
})
p1.then(data => {console.log("第二个then" + data)
})

结果
至此，我们的Promise如下

class MyPromise {#state = "pending"#value = nullstatic #PENDING = "pending"static #FULFILLED = "fulfilled"static #REJECTED = "rejected"#handlers = []constructor(executor) {const resolve = (data) => {this.#changeState(MyPromise.#FULFILLED, data)}const reject = (reason) => {this.#changeState(MyPromise.#REJECTED, reason)}try {executor(resolve, reject)} catch (error) {reject(error)}}#changeState(state, value) {if (this.#state !== MyPromise.#PENDING) returnthis.#state = statethis.#value = valuethis.#run()}then(onFulfilled, onRejected) {return new MyPromise((resolve, reject) => {this.#handlersPush(onFulfilled, onRejected, resolve, reject)this.#run()})}#run() {if (this.#state === MyPromise.#PENDING) returnwhile (this.#handlers.length > 0) {const handler = this.#handlers.shift()if (this.#state === MyPromise.#FULFILLED) {handler.onFulfilled(this.#value)}else if (this.#state === MyPromise.#REJECTED) {handler.onRejected(this.#value)}}}#handlersPush(onFulfilled, onRejected, resolve, reject) {this.#handlers.push({onFulfilled,onRejected,resolve,reject})}
}

因为内容过多，所以我将文章分为两篇，接下来的部分请看我的这篇文章
js手写Promise（下）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/461010.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【MySQL】：深入理解并掌握DML和DCL

【MySQL】：深入理解并掌握DML和DCL

🎥 屿小夏 ： 个人主页 🔥个人专栏 ： MySQL从入门到进阶 🌄 莫道桑榆晚，为霞尚满天！ 文章目录 📑前言一. DML1.1 添加数据1.2 修改数据1.3 删除数据 二. DCL2.1 管理用户2.2 权限控制…
阅读更多...
书生·浦语大模型第二课作业

书生·浦语大模型第二课作业

基础作业： 使用 InternLM-Chat-7B 模型生成 300 字的小故事（需截图）。熟悉 hugging face 下载功能，使用 huggingface_hub python 包，下载 InternLM-20B 的 config.json 文件到本地（需截图下载过程&#xf…
阅读更多...
【SpringBoot】JWT令牌

【SpringBoot】JWT令牌

📝个人主页：五敷有你 🔥系列专栏：SpringBoot ⛺️稳重求进，晒太阳 什么是JWT JWT简称JSON Web Token，也就是通过JSON形式作为Web应用的令牌，用于各方面之间安全的将信息作为JSON对象传输…
阅读更多...
【PyQt】09-控件提示信息、Lable标签

【PyQt】09-控件提示信息、Lable标签

文章目录 前言一、控件提示信息1.1 代码1.2 解释 < b >在HTML标签中的作用1.3 添加按键后的代码运行结果 二、QLabel控件介绍2.1 内容2.2 常用的事件2.3 代码结果展示 总结 前言 1、控件提示信息 2、QLabel控件介绍 一、控件提示信息 关键点在于 效果如图所示&#x…
阅读更多...
【大厂AI课学习笔记】1.5 AI技术领域（6）目标检测

【大厂AI课学习笔记】1.5 AI技术领域（6）目标检测

目标检测是CV中的重要场景。 在图像中定位感兴趣的目标&#xff0c;准确判断每个目标的类别&#xff0c;并给出每个目标的边界框。 上图是目标检测的典型应用案例。 目标检测的难点是小目标的高精度检测。 目前主要的应用领域是机器人导航、自动驾驶、智能视频监督、工业检测…
阅读更多...
springboot172基于springboot的二手车交易系统的设计与实现

springboot172基于springboot的二手车交易系统的设计与实现

二手车交易系统的设计与实现 摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统二手车交易信息管理难度大&…
阅读更多...
实例分割论文阅读之：FCN：《Fully Convolutional Networks for Semantica Segmentation》

实例分割论文阅读之：FCN：《Fully Convolutional Networks for Semantica Segmentation》

论文地址:https://openaccess.thecvf.com/content_cvpr_2015/papers/Long_Fully_Convolutional_Networks_2015_CVPR_paper.pdf 代码链接&#xff1a;https://github.com/pytorch/vision 摘要 卷积网络是强大的视觉模型&#xff0c;可以产生特征层次结构。我们证明&#xff0c…
阅读更多...
SegmentAnything官网demo使用vue+python实现

SegmentAnything官网demo使用vue+python实现

一、效果&准备工作 1.效果 没啥好说的&#xff0c;低质量复刻SAM官网 https://segment-anything.com/ 需要提一点&#xff1a;所有生成embedding和mask的操作都是python后端做的&#xff0c;计算mask不是onnxruntime-web实现的&#xff0c;前端只负责了把rle编码的mask解…
阅读更多...
【Java】eclipse连接MySQL数据库使用笔记(自用)

【Java】eclipse连接MySQL数据库使用笔记(自用)

注意事项 相关教程&#xff1a;java连接MySQL数据库_哔哩哔哩_bilibilijava连接MySQL数据库, 视频播放量 104662、弹幕量 115、点赞数 1259、投硬币枚数 515、收藏人数 2012、转发人数 886, 视频作者 景苒酱, 作者简介 有时任由其飞翔&#xff0c;有时禁锢其翅膀。粉丝群1&…
阅读更多...
【JavaWeb】头条新闻项目实现 基本增删改查 分页查询 登录注册校验 业务功能实现 第二期

【JavaWeb】头条新闻项目实现 基本增删改查 分页查询 登录注册校验 业务功能实现 第二期

文章目录 一、为什么使用token口令二、登录注册功能2.1 登录表单提交后端代码&#xff1a; 2.2 根据token获取完整用户信息代码实现&#xff1a; 2.3 注册时用户名占用校验代码实现&#xff1a; 2.4 注册表单提交代码实现&#xff1a; 三、头条首页功能3.1 查询所有头条分类3.2…
阅读更多...
【网络】：序列化和反序列化

【网络】：序列化和反序列化

序列化和反序列化 一.json库 二.简单使用json库 前面已经讲过TCP和UDP&#xff0c;也写过代码能够进行双方的通信了&#xff0c;那么有没有可能这种通信是不安全的呢&#xff1f;如果直接通信&#xff0c;可能会被底层捕捉&#xff1b;可能由于网络问题&#xff0c;一方只接收到…
阅读更多...
Maven私服部署与JAR文件本地安装

Maven私服部署与JAR文件本地安装

Nexus3 是一个仓库管理器&#xff0c;它极大地简化了本地内部仓库的维护和外部仓库的访问。 平常我们在获取 maven 仓库资源的时候&#xff0c;都是从 maven 的官方&#xff08;或者国内的镜像&#xff09;获取。团队的多人员同样的依赖都要从远程获取一遍&#xff0c;从网络方…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023