【JavaScript】手写Promise

news2024/11/30 9:28:40

🐱 个人主页：不叫猫先生
🙋‍♂️ 作者简介：2022年度博客之星前端领域TOP 2，前端领域优质作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！
💫优质专栏：vue3从入门到精通、TypeScript从入门到实践
📢 资料领取：前端进阶资料可以找我免费领取
🔥 摸鱼学习交流：我们的宗旨是在工作中摸鱼，摸鱼中进步，期待大佬一起来摸鱼(文末有我wx或者私信)。

目录

    • 基础回顾
    • 一、声明Promise类，并进行初始化操作
    • 二、then方法
    • 三、catch方法
    • 四、基础完整版代码
    • 五、案例测试
    • 六、问题
      • 1. 为什么then函数中需要考虑Promise状态为pending的情况？
      • 2. 当then函数传的参数不是函数怎么办？
      • 3. onResolvedCallbacks 和 onRejectedCallbacks 什么时候清空？
    • 七、优化后完整代码
    • 附
      • 1. 处理promsie异常的三种方式

面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie

基础回顾

先回顾一下Promise的基本使用方法及特点

  • promise三个状态：进⾏中（pending）、已完成(fulfilled)、已拒绝（fulfilled）

  • 处理promise异常的三种方式：

    • 通过promise的then的第二个参数
    • 通过.catch处理
    • 通过try…catch处理

  • promise状态处理

    • 处于等待态时，promise 需满⾜以下条件：可以变为「已完成」或「已拒绝」
    • 处于已完成时，promise 需满⾜以下条件：不能迁移⾄其他任何状态；必须拥有⼀个不可变的值
    • 处于已拒绝时，promise 需满⾜以下条件：不能迁移⾄其他任何状态；必须拥有⼀个不可变的原

一、声明Promise类，并进行初始化操作

首先定义一个Promise类，然后进行一些初始化操作。

  • 接收一个回调函数callback，回调函数包含两个参数，一个resolve，一个reject
  • 初始化状态为pending
  • 初始化成功状态的值
  • 初始化失败状态的值
  • 定义resolve函数
  • 定义reject函数
class MyPromise {
  constructor(callback) {
    // 初始化状态为 pending
    this.status = 'pending';
    // 初始化成功状态的值
    this.value = undefined;
    // 初始化失败状态的值
    this.reason = undefined;

    // 定义 resolve 函数
    const resolve = value => {
      if (this.status === 'pending') {
        // 更新状态为 resolved
        this.status = 'resolved';
        // 存储成功状态的值
        this.value = value;
      }
    };

    // 定义 reject 函数
    const reject = reason => {
      if (this.status === 'pending') {
        // 更新状态为 rejected
        this.status = 'rejected';
        // 存储失败状态的值
        this.reason = reason;
      }
    };

    // 调用回调函数，将 resolve 和 reject 传递给它
    callback(resolve, reject);
  }
}

二、then方法

接下来定义Promsie类中then函数。

  • 首先创建一个Promise对象，根据Promise的状态来执行不同的回调函数。then函数接收两个参数，一个onResolved（Promise 的状态为成功时候调用），一个onRejected（Promise 的状态为失败时候调用）。
  • then函数返回一个新的Promsie对象，它的值取决于回调函数的返回值
  • 如果当前状态是pending，需要将onResolved，onRejected回调保存起来，等异步结束之后再执行
class MyPromise {
 then(onResolved, onRejected) {
    // 创建一个新的 Promise 对象
    const newPromise = new MyPromise((resolve, reject) => {
      // 如果当前 Promise 的状态为 resolved
      if (this.status === 'resolved') {
        try {
          // 执行 onResolved 回调函数
          const x = onResolved(this.value);
          // 处理返回值
          resolve(x);
        } catch (error) {
          // 如果回调函数抛出异常，将异常作为失败状态的值
          reject(error);
        }
      }

      // 如果当前 Promise 的状态为 rejected
      if (this.status === 'rejected') {
        try {
          // 执行 onRejected 回调函数
          const x = onRejected(this.reason);
          // 处理返回值
          resolve(x);
        } catch (error) {
          // 如果回调函数抛出异常，将异常作为失败状态的值
          reject(error);
        }
      }

      // 如果当前 Promise 的状态为 pending
      if (this.status === 'pending') {
        // 将 onResolved 和 onRejected 保存起来
        // 等待异步操作完成后再执行
        this.onResolvedCallbacks.push(() => {
          try {
            const x = onResolved(this.value);
            resolve(x);
          } catch (error) {
            reject(error);
                });

    this.onRejectedCallbacks.push(() => {
      try {
        const x = onRejected(this.reason);
        resolve(x);
      } catch (error) {
        reject(error);
      }
    });
  }
});
// 返回新的 Promise 对象
return newPromise;
}

三、catch方法

将 catch 方法转化为 then 方法的一个语法糖，就可以实现啦。到这里我们基本已经实现了一个Promise

class MyPromise {
  catch(onRejected) {
    return this.then(null, onRejected);
  }
}

四、基础完整版代码

class MyPromise {
  constructor(callback) {
    // 初始化状态为 pending
    this.status = 'pending';
    // 初始化成功状态的值
    this.value = undefined;
    // 初始化失败状态的值
    this.reason = undefined;
    // 存储成功状态的回调函数
    this.onResolvedCallbacks = [];
    // 存储失败状态的回调函数
    this.onRejectedCallbacks = [];

    // 定义 resolve 函数
    const resolve = value => {
      if (this.status === 'pending') {
        // 更新状态为 resolved
        this.status = 'resolved';
        // 存储成功状态的值
        this.value = value;
        // 执行所有成功状态的回调函数
        this.onResolvedCallbacks.forEach(cb => cb());
      }
    };

    // 定义 reject 函数
    const reject = reason => {
      if (this.status === 'pending') {
        // 更新状态为 rejected
        this.status = 'rejected';
        // 存储失败状态的值
        this.reason = reason;
        // 执行所有失败状态的回调函数
        this.onRejectedCallbacks.forEach(cb => cb());
      }
    };

    // 调用回调函数，将 resolve 和 reject 传递给它
    callback(resolve, reject);
  }

    // 创建一个新的 Promise 对象
    const promise2 = new MyPromise((resolve, reject) => {
      // 如果当前 Promise 的状态为 resolved
      if (this.status === 'resolved') {
        try {
          // 执行 onResolved 回调函数
          const x = onResolved(this.value);
          // 处理返回值
          resolve(x);
        } catch
      (error) {
        // 如果回调函数抛出异常，则将异常作为新 Promise 的失败状态的值
        reject(error);
      }
    });
  }

  // 如果当前 Promise 的状态为 rejected
  if (this.status === 'rejected') {
    try {
      // 执行 onRejected 回调函数
      const x = onRejected(this.reason);
      // 处理返回值
      resolve(x);
    } catch (error) {
      // 如果回调函数抛出异常，则将异常作为新 Promise 的失败状态的值
      reject(error);
    }
  }

  // 如果当前 Promise 的状态为 pending
  if (this.status === 'pending') {
    // 将 onResolved 和 onRejected 回调函数保存起来，等待异步操作完成后再执行
    this.onResolvedCallbacks.push(() => {
      try {
        const x = onResolved(this.value);
        resolve(x);
      } catch (error) {
        reject(error);
      }
    });

    this.onRejectedCallbacks.push(() => {
      try {
        const x = onRejected(this.reason);
        resolve(x);
      } catch (error) {
        reject(error);
      }
    });
  }
});

  // 返回新的 Promise 对象
  return promise2;
}
catch(onRejected) {
   return this.then(null, onRejected);
   }
}

五、案例测试

生成一个myPromsie对象，然后用then方法进行链式调用。

		const promise = new MyPromise((resolve, reject) => {
			setTimeout(() => {
				console.log('1')
				resolve('成功')
			}, 1000)
		})
		promise.then(value => {
			console.log('2')
			return "第一次"
		}).then(value => {
			console.log('3')
			return new MyPromise((resolve, reject) => {
				setTimeout(() => {
					resolve('第二次处理结果');
				}, 1000);
			});
		}).then(value => {
			console.log(value);
			throw new Error('抛出异常');
		}).catch(error => {
			console.log(error);
		});

在这里插入图片描述

六、问题

1. 为什么then函数中需要考虑Promise状态为pending的情况？

当 then 方法被调用时，我们首先需要判断原始 Promise 对象的状态。

  • 如果原始 Promise 对象的状态为 fulfilled，那么我们就可以直接执行成功回调函数，并将成功状态的值作为参数传递给它。
  • 如果原始 Promise 对象的状态为 rejected，那么我们就可以直接执行失败回调函数，并将失败原因作为参数传递给它。
  • 但是，如果原始 Promise 对象的状态为 pending，那么我们就需要等待原始 Promise 对象的状态发生变化，再执行相应的操作。

2. 当then函数传的参数不是函数怎么办？

为了避免then函数传的参数不是函数，需要对上面代码稍微优化一下

  then(onResolved, onRejected) {
      	onResolved = typeof onResolved === "function" ? onResolved : (value) => value;
		onRejected = typeof onRejected === "function" ? onRejected : (reason) => { throw reason };
		//其他逻辑
  }

3. onResolvedCallbacks 和 onRejectedCallbacks 什么时候清空？

在调用then函数中，当Promise的状态为pending时候，会把onResolved和onRejected回调放到各自回调函数队列中，等状态改变（即在执行resolve函数/reject函数）时候，将 onResolvedCallbacks ，this.onRejectedCallbacks 循环调用。当Promise状态pending时候，就将 onResolvedCallbacks 和 onRejectedCallbacks 置空。所以优化上面代码如下：

then(onResolved,onRejected){
       if (this.status == "pending") {
						this.onResolvedCallbacks.push(() => {
							if (this.status == "resolved") {
								try {
									const x = onResolved(this.value)
									resolve(x)
								} catch (error) {
									reject(error)
								}
							}
						})
						this.onRejectedCallbacks.push(() => {
							if (this.status == "rejected") {
								try {
									const x = onRejected(this.reason)
									resolve(x)
								} catch (error) {
									reject(error)
								}
							}
						})
					} else {
						// 执行完所有回调函数之后，清空回调数组
						this.onResolvedCallbacks = [];
						this.onRejectedCallbacks = [];
					}
}

七、优化后完整代码

	<script>

		class MyPromise {
			constructor(callback) {
				this.status = "pending";
				this.value = "";
				this.reason = "";
				// 存储成功状态的回调函数
				this.onResolvedCallbacks = [];
				// 存储失败状态的回调函数
				this.onRejectedCallbacks = [];
				const resolve = (value) => {
					if (this.status == "pending") {
						this.status = "resolved"
						this.value = value;
						this.onResolvedCallbacks.forEach((fn) => fn());
					}
				}
				const reject = (reason) => {
					if (this.status == "pending") {
						this.status = "rejected"
						this.reason = reason;
						this.onRejectedCallbacks.forEach((fn) => fn());
					}
				}
				try {
					callback(resolve, reject);
				} catch (error) {
					reject(error);
				}

			}

			then(onResolved, onRejected) {
				onResolved = typeof onResolved === "function" ? onResolved : (value) => value;
				onRejected = typeof onRejected === "function" ? onRejected : (reason) => { throw reason };
				const promise2 = new MyPromise((resolve, reject) => {
					if (this.status == "resolved") {
						console.log('1111111111')
						try {
							const x = onResolved(this.value)
							resolve(x)
						} catch (error) {
							reject(error)
						}
					}
					if (this.status == "rejected") {
						console.log('2222222')
						try {
							const x = onRejected(this.reason)
							resolve(x)
						} catch (error) {
							reject(error)
						}
					}
					if (this.status == "pending") {
						console.log('333333333333')
						this.onResolvedCallbacks.push(() => {
							if (this.status == "resolved") {
								try {
									const x = onResolved(this.value)
									resolve(x)
								} catch (error) {
									reject(error)
								}
							}
						})
						this.onRejectedCallbacks.push(() => {
							if (this.status == "rejected") {
								try {
									const x = onRejected(this.reason)
									resolve(x)
								} catch (error) {
									reject(error)
								}
							}
						})
					} else {
						// 执行完所有回调函数之后，清空回调数组
						this.onResolvedCallbacks = [];
						this.onRejectedCallbacks = [];
					}
				})
				return promise2
			}
			catch(onRejected) {
				return this.then(null, onRejected)
			}
		}

		const promise = new MyPromise((resolve, reject) => {
			// setTimeout(() => {
			// 	console.log('1')
				resolve('成功')
			// }, 1000)
		})
		promise.then(1).
		then(value => {
			// console.log('2')
			// return "第一次"
			// setTimeout(() => {
				console.log('1')
					// return "第一次"
			// },1000)
		}).then(value => {
			console.log('3')
			return new MyPromise((resolve, reject) => {
				setTimeout(() => {
					resolve('第二次处理结果');
				}, 1000);
			});
		}).then(value => {
			console.log(value);
			throw new Error('抛出异常');
		}).catch(error => {
			console.log(error);
		});
	</script>

附

1. 处理promsie异常的三种方式

```javascript
function promise3() {
 return new Promise(function(resolve, reject) {
 var random = Math.random() * 10; // 随机⼀个 1 - 10 的数字
 setTimeout(function() {
      if (random >= 5) {
          resolve(random);
      } else {
          reject(random);
      } 
    }, 1000);
 });
}
var onResolve = function(val) {
 console.log('已完成：输出的数字是', val);
};
var onReject = function(val) {
 console.log('已拒绝：输出的数字是', val);
}
// promise 的 then 接收两个函数，第⼀个参数为 resolve 后执⾏，第⼆个函数为 reject 后执⾏
promise().then(onResolve, onReject);
// 也可以通过 .catch ⽅法拦截状态变为已拒绝时的 promise
promise().catch(onReject).then(onResolve);
// 也可以通过 try catch 进⾏拦截状态变为已拒绝的 promise
try {
 promise().then(onResolve);
} catch (e) {
 onReject(e);
}

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

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

相关文章

五. AMS实践,Hook启动未注册的Activity

五. AMS实践,Hook启动未注册的Activity

Activity任务栈解析 正常情况下我们的app中的所有Activity都是运行在同一个任务栈(ActivityStack)里面的,也就是我们app的build.gradle文件中的applicationId那个任务栈. 如何实现Activity运行在不同的任务栈呢? 需要在Intent启动这个Activity的时候,给这个intent赋值,设置代…
阅读更多...
【KVM虚拟化】· 存储池、存储卷

【KVM虚拟化】· 存储池、存储卷

目录 &#x1f341;虚拟磁盘文件 &#x1f342;基于文件系统的KVM存储 &#x1f342;基于设备的KVM存储 &#x1f341;使用KVM存储池 &#x1f342;存储池概念 &#x1f341;virsh中存储池命令 &#x1f341;virsh中存储卷命令 &#x1f341;命令实例 &#x1f342;创建存储池 …
阅读更多...
一个开源的即时通讯应用 Tailchat

一个开源的即时通讯应用 Tailchat

今天给大家介绍一款即时通讯应用&#xff0c;这个开源项目是&#xff1a;Tailchat&#xff0c;它是一个基于 React Typescript 的现代开源 noIM 应用程序。 简单介绍 相信大家都或多或少了解过 Discord / Slack 这样大火的即时通讯应用。两者分别在各自的领域有很大的成就。…
阅读更多...
http强缓存和协商缓存的介绍和应用案例，简介明了

http强缓存和协商缓存的介绍和应用案例，简介明了

http强缓存和协商缓存的介绍和应用案例&#xff0c;简介明了 http缓存方式简介缓存机制案例1. Expires老版本的方式&#xff1a;2. cache-control新版本的方式&#xff1a;3.Etag和If-None-Match http缓存方式简介 强缓存&#xff1a;强缓存使用Expires&#xff08;老版本&…
阅读更多...
el-table实现可编辑表格的思路；el-table删除不正确：表格中的el-select下拉数据项有值，但输入框中value值不显示

el-table实现可编辑表格的思路；el-table删除不正确：表格中的el-select下拉数据项有值，但输入框中value值不显示

目录 一、问题 二、原因及解决方法 三、总结 tips:如嫌繁琐&#xff0c;直接看总结即可&#xff01; 一、问题 el-table实现可编辑表格的思路&#xff1a; 1.要写一个可编辑的表格&#xff1a;表格中的一列是下拉框。实现方法很简单&#xff1a;在el-table-column(elemen提…
阅读更多...
PMP课堂模拟题目及解析（第9期）

PMP课堂模拟题目及解析（第9期）

81. 一位经验丰富的项目经理在到达一个重大开发里程碑之前识别到一个问题&#xff0c;项目经理采取相应的行动&#xff0c;并能够按时解决问题。两周后&#xff0c;发起人通知项目经理&#xff0c;客户发出了处罚费。若要避免这个问题&#xff0c;项目经理应该事先做什么&…
阅读更多...
FGX Native 1.4.1.1 For Delphi Crack

FGX Native 1.4.1.1 For Delphi Crack

FGX Native 1.4.1.1 For Delphi Crack FGX Native Network Frame是制造跨平台和现代移动设备的强大工具。FG开发团队的主要目标是简化移动应用程序的开发&#xff0c;使大多数人都能以各种技能开发应用程序。此外&#xff0c;这种形式的网络最重要的功能可以在100%的用户界面中…
阅读更多...
CorelDRAW2020工作室版下载及新增功能介绍

CorelDRAW2020工作室版下载及新增功能介绍

CorelDRAW Graphics Suite 2020将基于人工智能的图形设计提升到一个全新水平。CorelDRAW 中增强了“查找和替换”\“对齐和分布”、阴影效果等功能。您喜欢的 Corel PHOTO-PAINT 功能 — 从遮罩、效果和透镜到“替换颜色”— 均已优化&#xff01; 针对操作系统的功能优化 Core…
阅读更多...
微信之小程序授权登录

微信之小程序授权登录

首先我要怒骂微信的后台开发 真的还是乱七八糟。 首先我们登录微信开发平台 选择要开发的类型 然后小程序登录&#xff1a;选择 微信小程序实现微信登录详解&#xff08;JAVA后台&#xff09;官方文档&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/framework…
阅读更多...
玩转ChatGPT：魔改文章成果格式

玩转ChatGPT：魔改文章成果格式

一、写在前面 首先&#xff0c;我让小Chat替我吐槽一下&#xff1a; 科研人员天天都在填各种表格&#xff0c;简直成了我们的“表格王子”和“表格公主”。从申请项目、提交论文到汇报成果&#xff0c;表格无处不在。我们填表格的时候总是期待着它能让我们的工作更高效、更顺…
阅读更多...
Redis 内存消耗及回收

Redis 内存消耗及回收

Redis 是一个开源、高性能的 Key-Value 数据库&#xff0c;被广泛应用在服务器各种场景中。Redis 是一种内存数据库&#xff0c;将数据保存在内存中&#xff0c;读写效率要比传统的将数据保存在磁盘上的数据库要快很多。所以&#xff0c;监控 Redis 的内存消耗并了解 Redis 内存…
阅读更多...
tinyWebServer 学习笔记——四、日志系统

tinyWebServer 学习笔记——四、日志系统

文章目录 一、基础知识1. 概念2. API 二、代码解析1. 单例模式2. 阻塞队列3. 日志类定义4. 生成日志文件并判断写入方式5. 日志分级与分文件 参考文献 一、基础知识 1. 概念 流程图 [2] 日志&#xff1a;由服务器自动创建&#xff0c;用于记录运行状态和错误信息&#xff1b;同…
阅读更多...
C++系列六：运算符

C++系列六：运算符

C运算符 1. 算术运算符2. 关系运算符3. 逻辑运算符4. 按位运算符5. 取地址运算符6. 取内容运算符7. 成员选择符8. 作用域运算符9. 总结 1. 算术运算符 算术运算符用于执行基本数学运算&#xff0c;例如加减乘除和取模等操作。下表列出了C中支持的算术运算符&#xff1a; 运算…
阅读更多...
JSON+AJAX+ThreadLocal+文件上传下载

JSON+AJAX+ThreadLocal+文件上传下载

文章目录 JSON和AJAX文档介绍1. JSON介绍1.1 JSON快速入门1.2 JSON和字符串转换1.2.1 JSON转字符串1.2.2 字符串转JSON1.2.3 JSON和字符串转换细节 1.3 JSON在java中使用1.3.1 Java对象和JSON字符串转换1.3.2 List对象和JSON字符串转换1.3.3 Map对象和JSON字符串转换 2. Ajax介…
阅读更多...
DAY 58 数据库的存储引擎

DAY 58 数据库的存储引擎

存储引擎的概念 什么是存储引擎 MySQL中的数据用各种不下同的技术存储在文件中&#xff0c;每一种技术都使用不同的存储机制、索引技巧、锁定水平并最终提供不同的功能和能力&#xff0c;这些不同的技术以及配套的功能在MySQL中称为存储引擎。 存储引擎是MySQL将数据存储在文…
阅读更多...
JUC之volatile

JUC之volatile

作用&#xff1a;volatile是Java提供的一种轻量级的同步机制 保证内存可见性 不保证原子性 防止指令重排序 public class VolatileDemo {private static int num0;public static void main(String[] args) {new Thread(()->{while (num0){}},"A").start();try {…
阅读更多...
Spark大数据处理讲课笔记4.6 Spark SQL数据源 - JDBC

Spark大数据处理讲课笔记4.6 Spark SQL数据源 - JDBC

文章目录 零、本讲学习目标一、Spark SQL读取关系数据库二、Spark SQL JDBC连接属性三、创建数据库与表&#xff08;一&#xff09;创建数据库&#xff08;二&#xff09;创建学生表&#xff08;二&#xff09;创建成绩表 四、读取和写入数据库表&#xff08;一&#xff09;利用…
阅读更多...
力扣第 104 场双周赛 2681. 英雄的力量

力扣第 104 场双周赛 2681. 英雄的力量

原题链接力扣 题目大意&#xff1a;我开始看成连续子段了&#xff0c;写了个递归程序....... 一个数组任选一个子序列&#xff0c;子序列的力量值最大值平方*最小值。求所有子序列的力量和。 分析过程&#xff1a;如序列长度为n&#xff0c;子序列总数为2的n次幂&#xff0c…
阅读更多...
SpringCloud------zookeeper代替Eureka，zookeeper版本冲突解决（七）

SpringCloud------zookeeper代替Eureka，zookeeper版本冲突解决（七）

SpringCloud------zookeeper代替Eureka&#xff08;七&#xff09; SpringCloud整合zookeeper代替Eureka 注册中心zookeeper zookeeper是一个分布式协调工具&#xff0c;可以实现注册中心功能 关闭Linux服务器防火墙后&#xff0c;启动zookeeper服务器 zookeeper服务器取代Eur…
阅读更多...
mac桌面文件删除怎么恢复？别急，有办法！

mac桌面文件删除怎么恢复？别急，有办法！

大家是不是习惯于将临时要用的文件都存放在桌面上。虽然文件放在桌面上&#xff0c;可以方便我们随时调取&#xff0c;但是也容易出现误删除的情况&#xff0c;给我们带来麻烦。mac桌面文件删除怎么恢复&#xff1f;希望通过本篇教程&#xff0c;你能找回误删除的桌面文件。 案…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023