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.mzph.cn/news/675215.shtml

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

相关文章

代码随想录算法训练营DAY16 | 二叉树 (3)

代码随想录算法训练营DAY16 | 二叉树 (3)

一、LeetCode 104 二叉树的最大深度 题目链接：104.二叉树的最大深度https://leetcode.cn/problems/maximum-depth-of-binary-tree/ 思路：采用后序遍历递归求解。 class Solution {int ans 0;public int maxDepth(TreeNode root) {if(root null){retur…
阅读更多...
wyh的迷宫

wyh的迷宫

涉及知识点：求迷宫能否到达终点的，而不是求路径数的，用bfs时可以不用重置状态数组（回溯）。 题目描述 给你一个n*m的迷宫，这个迷宫中有以下几个标识： s代表起点 t代表终点 x代表障碍物 .代…
阅读更多...
PHPExcel导出excel

PHPExcel导出excel

PHPExcel下载地址 https://gitee.com/mirrors/phpexcelhttps://github.com/PHPOffice/PHPExcel 下载后目录结构 需要的文件如下图所示 将上面的PHPExcel文件夹和PHPExcel.php复制到你需要的地方 这是一个简单的示例代码 <?php$dir dirname(__FILE__); //require_once …
阅读更多...
Unity3d Shader篇（五）— Phong片元高光反射着色器

Unity3d Shader篇（五）— Phong片元高光反射着色器

文章目录 前言一、Phong片元高光反射着色器是什么&#xff1f;1. Phong片元高光反射着色器的工作原理2. Phong片元高光反射着色器的优缺点优点缺点 二、使用步骤1. Shader 属性定义2. SubShader 设置3. 渲染 Pass4. 定义结构体和顶点着色器函数5. 片元着色器函数 三、效果四、总…
阅读更多...
SpringBoot WebSocket客户端与服务端一对一收发信息

SpringBoot WebSocket客户端与服务端一对一收发信息

依赖 <!--websocket--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>配置类 Configuration public class WebSocketConfig {Bean //方法返回值交…
阅读更多...
微软.NET6开发的C#特性——委托和事件

微软.NET6开发的C#特性——委托和事件

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;看到不少初学者在学习编程语言的过程中如此的痛苦&#xff0c;我决定做点什么&#xff0c;下面我就重点讲讲微软.NET6开发人员需要知道的C#特性&#xff0c;然后比较其他各种语言进行认识。 C#经历了多年发展…
阅读更多...
【Spring源码解读！底层原理进阶】【上】探寻Spring内部：BeanFactory和ApplicationContext实现原理揭秘✨

【Spring源码解读！底层原理进阶】【上】探寻Spring内部：BeanFactory和ApplicationContext实现原理揭秘✨

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《Spring 狂野之旅&#xff1a;底层原理高级进阶》 &#x1f680…
阅读更多...
Docker部署前端项目

Docker部署前端项目

某次阿里云的自动流水线失败了&#xff0c;代码本地跑起来莫得问题&#xff0c;错误日志提示让我跑一下npm run build &#xff0c;但是俺忽然发现&#xff0c;我跑了&#xff0c;文件打包好了&#xff0c;但是往哪里运行呢&#xff1f;这涉及到要构建一个环境供打包文件部署吧…
阅读更多...
【Linux】线程池线程安全的单例模式和STL读者写者问题

【Linux】线程池线程安全的单例模式和STL读者写者问题

需要云服务器等云产品来学习Linux的同学可以移步/–>腾讯云<–/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;优惠多多。&#xff08;联系我有折扣哦&#xff09; 文章目录 1. 线程池1.1 线程池是什么1.2 为什么要有线程池1.3 线程池的应用场景1.4 线程池的任…
阅读更多...
ONLYOFFICE文档8.0新功能浅探

ONLYOFFICE文档8.0新功能浅探

ONLYOFFICE文档8.0新功能浅探 上个月末这个月初的几天&#xff0c;ONLYOFFICE版本更新了&#xff01;更新到了一个比较整的大的版本号&#xff0c;8.0版本&#xff0c;看来这个生产力工具的升级速度基本上能保持每年两个版本号的速度&#xff0c;还是很快的&#xff0c;一般来…
阅读更多...
【stomp实战】websocket原理解析与简单使用

【stomp实战】websocket原理解析与简单使用

一、WebSocket 原理 WebSocket是HTML5提供的一种浏览器与服务器进行全双工通讯的网络技术&#xff0c;属于应用层协议。它基于TCP传输协议&#xff0c;并复用HTTP的握手通道。浏览器和服务器只需要完成一次握手&#xff0c;两者之间就直接可以创建持久性的连接&#xff0c; 并…
阅读更多...
多线程JUC：等待唤醒机制（生产者消费者模式）

多线程JUC：等待唤醒机制（生产者消费者模式）

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;多线程&JUC&#xff1a;解决线程安全问题——synchronized同步代码块、Lock锁 &#x1f4da;订阅专栏&#xff1a;多线程&am…
阅读更多...
Kubernetes实战(二十七)-HPA实战

Kubernetes实战(二十七)-HPA实战

1 HPA简介 HPA 全称是 Horizontal Pod Autoscaler&#xff0c;用于POD 水平自动伸缩&#xff0c; HPA 可以 基于 POD CPU 利用率对 deployment 中的 pod 数量进行自动扩缩容&#xff08;除了 CPU 也可以基于自定义的指标进行自动扩缩容&#xff09;。pod 自动缩放不适用于无法…
阅读更多...
NGINX upstream、stream、四/七层负载均衡以及案例示例

NGINX upstream、stream、四/七层负载均衡以及案例示例

文章目录 前言1. 四/七层负载均衡1.1 开放式系统互联模型 —— OSI1.2 四/七层负载均衡 2. Nginx七层负载均衡2.1 upstream指令2.2 server指令和负载均衡状态与策略2.2.1 负载均衡状态2.2.2 负载均衡策略 2.3 案例 3. Nginx四层负载均衡的指令3.1 stream3.2 upstream指令3.3 四…
阅读更多...
深入理解ES的倒排索引

深入理解ES的倒排索引

目录 数据写入过程 词项字典 term dictionary 倒排表 posting list FOR算法 RBM算法 ArrayContainer BitMapContainer 词项索引 term index 在Elasticsearch中&#xff0c;倒排索引的设计无疑是惊为天人的&#xff0c;下面看下倒排索引的结构。 倒排索引分为词项索引【…
阅读更多...
JS中常用占位符使用方法详解_ |%s|%d|%f|%o|%O|%c|

JS中常用占位符使用方法详解_ |%s|%d|%f|%o|%O|%c|

在 JavaScript 中&#xff0c;%s 是一种字符串格式化占位符&#xff0c;用于将字符串插入到另一个字符串中的指定位置。这种方法基于 C 语言的 printf() 函数&#xff0c;但在 JavaScript 中有一些变化。 在 JavaScript 中&#xff0c;%s 可以接受任何类型的值&#xff0c;并将…
阅读更多...
上市公司人工智能转型指数及55个工具变量汇总数据集（2024.2月更新）

上市公司人工智能转型指数及55个工具变量汇总数据集（2024.2月更新）

一、“智能化转型”发文趋势和主题分布 二、数据来源 上市公司年报、官网&#xff0c;中国知网及各期刊官网等三、时间跨度 工具变量&#xff1a;2022-2024年&#xff1b; 上市公司人工智能转型指数&#xff1a;2007-2021年四、数据范围 中国A股上市公司五、数据展示 序号…
阅读更多...
一键部署自动化运维工具spug

一键部署自动化运维工具spug

简介 Spug是面向中小型企业设计的轻量级无Agent的自动化运维平台&#xff0c;整合了主机管理、主机批量执行、主机在线终端、应用发布部署、在线任务计划、配置中心、监控、报警等一系列功能。 部署 1.创建目录 mkdir -p /opt/spug/{mysql,service,repos} 2.进入目录 cd /o…
阅读更多...
Modern C++ 内存篇1 - allocator

Modern C++ 内存篇1 - allocator

1. 前言 从今天起我们开始内存相关的话题&#xff0c;内存是个很大的话题&#xff0c;一时不知从何说起。内存离不开allocator&#xff0c;我们就从allocator开始吧。allocator目前有两种&#xff1a;std::allocator, std::pmr::polymorphic_allocator&#xff0c;各有优缺点。…
阅读更多...
Vue源码系列讲解——虚拟DOM篇【二】(Vue中的DOM-Diff)

Vue源码系列讲解——虚拟DOM篇【二】(Vue中的DOM-Diff)

目录 1. 前言 2. patch 3. 创建节点 4. 删除节点 5. 更新节点 6. 总结 1. 前言 在上一篇文章介绍VNode的时候我们说了&#xff0c;VNode最大的用途就是在数据变化前后生成真实DOM对应的虚拟DOM节点&#xff0c;然后就可以对比新旧两份VNode&#xff0c;找出差异所在&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023