手写promise原理系列四：封装Promise.prototype.then方法，promise.then的用法

已于 2023-03-17 12:41:54 修改
阅读量469 收藏 1
点赞数
分类专栏： 手写JavaScript源码系列 文章标签： 手写promise promise原理 promise用法 promise面试题 promise.then
于 2023-03-13 12:45:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ThisEqualThis/article/details/129478149
版权

文章目录


在这里插入图片描述
这篇文章我们将封装 Promise.prototype.then 方法。

then 方法的封装逻辑比较复杂，所以这篇文章有点长，还请大家一定要耐心看完，相信你一定会有所收获的。若能将本系列通关，相信你的实力一定会再上一个台阶的，加油。

在 then 方法中，将实现以下功能：

  1. 执行 onResolved 以及 onRejected 回调函数的时机，成功时执行 onResolved，失败时执行 onResolved；
  2. pending 状态时，如何执行回调函数？
  3. 单次调用 then 方法时，如何缓存回调函数？
  4. 多次调用 then 方法时，如何缓存多个回调函数？
  5. then方法的返回值（同步、异步）；
  6. then方法中回调函数是微任务；使用 queueMicrotask 微任务队列。

先来看 then 的使用方式：

let p = new Promise((resolve, reject)=>{
	resolve("OK");
})
p.then(value => {
	console.log(value);  // "OK"
}, reason => {
	console.log(reason);
})

定义then方法

then 方法接受两个参数，第一个参数为状态变为成功时的回调函数 onResolved，第二个参数为状态变为失败时的回调函数onRejected。

（1）状态改变时，执行相应的回调函数，获取相应的结果数据

Promise.prototype.then = function(onResolved, onRejected){
	// 当状态变为成功时，执行 onResolved 回调函数
	if (this.PromiseState === "fulfilled") {
		onResolved(this.PromiseResult);  // 传入 promise 的结果
	}
	// 当状态变为失败时，执行 onRejected 回调函数
	if (this.PromiseState === "rejected") {
		onRejected(this.PromiseResult);  // 传入 promise 的结果
	}
}

如下图，加深理解：
在这里插入图片描述

（2）当异步执行更改 promise 状态时，缓存这两个回调函数，等待时机执行

异步执行时更改 promise 状态代码如下：

let p = new Promise((resolve, reject)=>{
	// 添加 setTimeout 异步更改状态
	setTimeout(() => {
		resolve("OK");
	}, 1000)
})
p.then(value => {
	console.log(value);  // 1s后执行当前回调函数，输出"OK"
}, reason => {
	console.log(reason);
})

当使用异步方式更改 promise 状态时，then 方法会优先执行，但是状态还未更改，处于 pending 状态，所以无法执行 then 方法中的回调函数，记住一点：永远是状态更改在前，then 中回调函数执行在后。这时候怎么办呢？将 then 中的回调函数缓存起来，等待状态变更时再执行，这样就可以获取到最终结果了。逻辑如下：

  • 给 promise 对象新增一个 callback 属性，用来缓存 then 中的回调函数；
  • 异步改变状态时，因为 pending 状态的存在，所以回调函数的执行时机是在改变状态之后立即执行；
  • 增加 pending 状态的判断逻辑，修改 Promise 构造函数代码；
function Promise(excutor){
	this.PromiseState = "pending";
	this.PromiseResult = undefined;
	// 初始化 callback 回调函数缓存
	this.callback = {};
	const resolve = (value) => {
		if (this.PromiseState !== "pending") return;
		this.PromiseState = "fulfilled";
		this.PromiseResult = value;
		// 当异步状态改变时，立即从callback中取出函数调用，获取结果
		if(this.callback.onResolved){
			this.callback.onResolved(this.PromiseResult)
		}
	}
	const reject = (reason) => {
		if (this.PromiseState !== "pending") return;
		this.PromiseState = "rejected";
		this.PromiseResult = reason;
		// 当异步状态改变时，立即从callback中取出函数调用，获取结果
		if(this.callback.onRejected){
			this.callback.onRejected(this.PromiseResult)
		}
	}
	try {
		excutor(resolve, reject);
	} catch (err) {
		reject(err);
	}
}
Promise.prototype.then = function(onResolved, onRejected){
	// 当状态变为成功时，执行 onResolved 回调函数
	if (this.PromiseState === "fulfilled") {
		onResolved(this.PromiseResult)
	}
	// 当状态变为失败时，执行 onRejected 回调函数
	if (this.PromiseState === "rejected") {
		onRejected(this.PromiseResult)
	}
	// 当状态为pending时，缓存回调函数
	if (this.PromiseState === "pending") {
		this.callback = { onResolved, onRejected }
	}
}

（3）当为 then 指定多个回调函数时，如何调用？

在第（2）步中，callback 是一个对象，里面仅存储了一个成功的回调以及一个失败的回调，这样封装会有问题；当指定多个回调函数时，我们封装的then方法中，前面的回调函数会被后面的覆盖掉。像下面这种使用方式：

let p = new Promise((resolve, reject)=>{
	setTimeout(() => {
		resolve("OK");
	}, 1000)
})
// then1
p.then(value => {
	console.log("111");	// 被覆盖，无法输出
}, reason => {
	console.log("222");	// 被覆盖，无法输出
})
// then2，then2中的回调函数会覆盖then1中的回调函数
p.then(value => {
	console.log("aaa"); // 输出 "aaa"
}, reason => {
	console.log("bbb"); // 输出 "bbb"
})

所以，这里需要做一下修改，将 callback 修改为数组，这样可以存储多个回调函数，然后在 promise 状态改变时，全部执行。修改代码如下：

function Promise(excutor){
	this.PromiseState = "pending";
	this.PromiseResult = undefined;
	// 初始化 callback 为数组
	this.callback = [];
	const resolve = (value) => {
		if (this.PromiseState !== "pending") return;
		this.PromiseState = "fulfilled";
		this.PromiseResult = value;
		// 当异步状态改变时，循环获取当前回调函数并执行
		this.callback.forEach(item => {
			if(item.onResolved){
				item.onResolved(this.PromiseResult)
			}
		})
	}
	const reject = (reason) => {
		if (this.PromiseState !== "pending") return;
		this.PromiseState = "rejected";
		this.PromiseResult = reason;
		// 当异步状态改变时，循环获取当前回调函数并执行
		this.callback.forEach(item => {
			if(item.onRejected){
				item.onRejected(this.PromiseResult)
			}
		})
	}
	// ...其他代码...
}
Promise.prototype.then = function(onResolved, onRejected){
	// ...其他代码...
	// 当状态为 pending 时，缓存回调函数
	if (this.PromiseState === "pending") {
		this.callback.push({ onResolved, onRejected })
	}
}

（4）同步任务下，then 方法返回的结果实现

在上面实现的 then 方法中，还没有实际的返回值；如果你去调用一下封装的 then 方法，返回值是一个 undefined。

下面我们将封装 then方法的返回值 逻辑：

  • then 方法返回的是一个 promise 对象；return new Promise((resolve, reject)=>{})
  • then 方法中回调函数的返回值，就是 onResolved / onRejected 调用后的返回值；
    在这里插入图片描述
  • 接下来，只需要判断 then 中回调函数的返回值 result 的情况就可以了。这里可以参考手写promise系列二：手写promise的关键逻辑梳理中的第四点。简单说一下就是三种情况：①throw抛出异常；②promise对象；③非promise对象的任意值。
    在这里插入图片描述
    若回调函数返回值是一个 promise 对象，则回调函数返回的 promise 对象的结果就是 then 方法返回的 promise 对象的结果。

接下来书写代码，来看成功的情况（失败的情况与成功逻辑一致）：

Promise.prototype.then = function(onResolved, onRejected){
	// 返回一个 promise 对象
	return new Promise((resolve, reject) => {
		// 当状态变为成功时，执行 onResolved回调函数
		if (this.PromiseState === "fulfilled") {
			// throw抛出异常，使用 try...catch...捕获异常（第一种情况）
			try {
				// 获取回调函数的返回值
				let result = onResolved(this.PromiseResult);
				// 是一个 promise对象（第二种情况）
				if (result instanceof Promise) {
					result.then(value => {  // promise可以调用 then方法，本质就是递归调用
						resolve(value);
					}, reason => {
						reject(reason);
					})
				} else {
					// 非 promise对象的任意值（第三种情况）
					resolve(result);
				}
			} catch (err) {
				// throw 抛出异常时，执行结果状态变为失败
				reject(err);
			}
		}
		// 当状态变为失败时，执行 onRejected回调函数
		if (this.PromiseState === "rejected") {
			// ...与 fulfilled 的代码逻辑一致，此处省略...
		}
	})
}

（5）异步任务下，then 方法返回的结果实现

异步任务，就是改变状态时使用了 setTimeout、setInterval 等异步任务队列。

let p = new Promise((resolve, reject)=>{
	setTimeout(() => {
		resolve("OK");
	}, 1000)
})
p.then(value => {
	console.log(value); // 1s后输出 "OK"
}, reason => {
	console.log(reason);
})

执行上面代码，p 的状态一直是 pending，直到1s后结束，状态变为 resolve。那 pending 状态下，如何处理 then 方法的返回值呢？这里其实跟第（4）步是一样的，也是判断那三种情况，只是这次需要判断的内容是 callback 中缓存的回调函数。代码如下：

Promise.prototype.then = function(onResolved, onRejected){
	// 返回一个 promise 对象
	return new Promise((resolve,reject) => {
		// ...其他代码...
		// 当状态为 pending时，缓存回调函数
		if (this.PromiseState === "pending") {
			this.callback.push({
				onResolved: function(){
					// throw 抛出异常，使用 try...catch...捕获异常（第一种情况）
					try {
						// 获取回调函数的返回值
						let result = onResolved(this.PromiseResult);
						// 是一个 promise 对象（第二种情况）
						if (result instanceof Promise) {
							result.then(value => {  // 这里调用then，本质就是递归
								resolve(value);
							}, reason => {
								reject(reason);
							})
						} else {
							// 非 promise 对象的任意值（第三种情况）
							resolve(result);
						}
					} catch (err) {
						reject(err);
					}
				}
				onRejected: function(){
					// ...与 onResolved 的代码逻辑一致，此处省略...
				}
			})
		}
	})
}

写到这里，我们可以看出，判断then方法的返回值的逻辑是有很大一部分重复的，这时候我们可以封装成一个公共方法。如下：

Promise.prototype.then = function(onResolved, onRejected){
	return new Promise((resolve,reject) => {
		// 公共逻辑封装成公共方法 getThenCallbackResult：获取回调函数的返回值
		const getThenCallbackResult = (type) => {
			try {
				// type 是一个函数
				let result = type(this.PromiseResult);
				if (result instanceof Promise) {
					result.then(value => {
						resolve(value);
					}, reason => {
						reject(reason);
					})
				} else {
					resolve(result);
				}
			} catch (err) {
				reject(err);
			}
		}
		if (this.PromiseState === "fulfilled") {
			getThenCallbackResult(onResolved);
		}
		if (this.PromiseState === "rejected") {
			getThenCallbackResult(onRejected);
		}
		if (this.PromiseState === "pending") {
			this.callback.push({
				onResolved: function(){
					getThenCallbackResult(onResolved);
				},
				onRejected: function(){
					getThenCallbackResult(onRejected);
				}
			})
		}
	})
}

（6）then 中指定的回调函数其实是异步执行的，也就是所谓的微任务

你知道下面代码所输出值的顺序么？真实的输出顺序其实是先输出 "111" ，然后输出 "333"，最后输出 "222"。这里说明，其实 then 中的回调函数是一个微任务，所以要在同步代码执行完毕后，再执行回调函数。

let p = new Promise((resolve, reject)=>{
	resolve("111");
})
p.then(value => {
	console.log("222")
})
console.log("333");

在我们封装的代码中应该如何写出这种效果呢？很简单，将then中的回调函数全部放入微任务队列。请看代码：

Promise.prototype.then = function(onResolved, onRejected){
	return new Promise((resolve,reject) => {
		// ... 其他代码
		if (this.PromiseState === "fulfilled") {
			// 加入微任务队列，延迟执行
			queueMicrotask(() => {
	           getThenCallbackResult(onResolved);
	        })	
		}
		if (this.PromiseState === "rejected") {
			// 加入微任务队列，延迟执行
			queueMicrotask(() => {
	           getThenCallbackResult(onRejected);
	        })
		}
		if (this.PromiseState === "pending") {
			this.callback.push({
				onResolved: function(){
					// 加入微任务队列，延迟执行
					queueMicrotask(() => {
			           getThenCallbackResult(onResolved);
			        })
				},
				onRejected: function(){
					// 加入微任务队列，延迟执行
					queueMicrotask(() => {
			           getThenCallbackResult(onRejected);
			        })
				}
			})
		}
	})
}

（7）then 方法以及 Promise 构造函数的完整代码

function Promise(excutor){
	this.PromiseState = "pending";
	this.PromiseResult = undefined;
	this.callback = [];
	const resolve = (value) => {
		if (this.PromiseState !== "pending") return;
		this.PromiseState = "fulfilled";
		this.PromiseResult = value;
		this.callback.forEach(item => {
			if(item.onResolved){
				item.onResolved()
			}
		})
	}
	const reject = (reason) => {
		if (this.PromiseState !== "pending") return;
		this.PromiseState = "rejected";
		this.PromiseResult = reason;
		this.callback.forEach(item => {
			if(item.onRejected){
				item.onRejected()
			}
		})
	}
	try {
		excutor(resolve, reject);
	} catch (err) {
		reject(err);
	}
}
Promise.prototype.then = function(onResolved, onRejected){
	return new Promise((resolve,reject) => {
		const getThenCallbackResult = (type) => {
			try {
				let result = type(this.PromiseResult);
				if (result instanceof Promise) {
					result.then(value => {
						resolve(value);
					}, reason => {
						reject(reason);
					})
				} else {
					resolve(result);
				}
			} catch (err) {
				reject(err);
			}
		}
		if (this.PromiseState === "fulfilled") {
			getThenCallbackResult(onResolved);
		}
		if (this.PromiseState === "rejected") {
			getThenCallbackResult(onRejected);
		}
		if (this.PromiseState === "pending") {
			this.callback.push({
				onResolved: function(){
					getThenCallbackResult(onResolved);
				},
				onRejected: function(){
					getThenCallbackResult(onRejected);
				}
			})
		}
	})
}

终于完成了本篇，我也长吁了一口气，第一次写这么长的文章。本篇文章确实有点小复杂，但相信大家多看多写，一定能攻克当前难点的，大家一定要先通关本系列的第一篇和第二篇文章，并理解其中字句真意。

其实上面的代码还有一点小瑕疵，就是当then中参数减少或不传入参数时，程序是会报错的，因为没有做兼容性处理，碍于本章篇幅过长，放到下一章与 catch 的 异常穿透 一起讲解。

可达鸭头上站青蛙
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js-Promise：手写系列手写promise，vue ..
02-21
js-Promise 手写一个简单的承诺无极初级核心发布订阅模式
promise笔记(四)
T-T
08-04 118
当js程序执行到异步代码(如定时器，ajax请求等)时，会把异步回调函数放入到队列中，等到同步代码全部执行完后再从队列里取出函数执行。实际上，js有两个队列，分别是宏队列与微队列，宏队列专门放与定时器相关的异步回调，ajax回调，dom事件回调；微队列专门放promise回调和mutation observer回调，关于mutation observer我们现在不用了解，因为这个东西用的很少，所以只需要记住promise是放到微队列就行了。......
promise.then异步实现方法对比（简易手写vs源码解析）
Erya Programming learning
03-06 490
reaction 对象用于封装 then 方法中传入的成功和失败回调函数，以及与之关联的新 Promise 对象。它包含了以下属性：ok：用于存储成功回调函数，如果传入的回调函数是可调用的，则将其存储在这里。fail：用于存储失败回调函数，如果传入的回调函数是可调用的，则将其存储在这里。promise：用于保存 then 方法返回的新 Promise 对象。domain：用于存储当前 Promise 对象所属的域（如果支持）。
ES6 --- Promise深入学习（七）Promise 微任务（Microtask）
秋天，黄叶坠地，凉风有信。
03-04 919
微任务（Microtask） Promise 的处理程序（handlers）.then、.catch 和 .finally 都是异步的。 即便一个 promise 立即被 resolve，.then、.catch 和 .finally 下面 的代码也会在这些处理程序（handler）之前被执行。 示例代码如下： let promise = Promise.resolve(); promise.then(() => alert("promise done!")); alert("code finis
（进阶）手写Promise-then方法（实现1）
次顶级的博客
12-20 327
实现resolve , reject同时调用时，只会执行第一个回调 then时将回调加入微任务，延迟执行，确保拿到then的成功和失败回调后执行
前端开发核心知识进阶 —— 宏任务和微任务
qq_56303170的博客
11-05 826
前端开发核心知识进阶 —— 宏任务和微任务
【ES6标准入门】JavaScript的Promise对象的补充和扩展
m0_56132701的博客
10-14 58
​🔥​前言：所谓Promise,简单来说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果Promise对象有以下两个特点：ES6规定，Promise对象是一个构造函数，用来生成Promise实例 使用细节：当前脚本所有的 同步任务执行完成后才会执行resolve函数的参数处理正常的值外，还可能使另一个Promise实例,比如下面这样 p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态，如果p1的状态是Pending，那么p2的回调函数就会等待p1的状态改变，如果p
promise的使用和手写
baidu_41677887的博客
09-22 398
promise的使用和手写
Promise - （五）then方法参数回调函数加入异步微任务队列的时机
伏城之外的博客
12-04 1370
先看一个例子 Promise.resolve().then(()=>{ setTimeout(()=>{ console.log(1) }) }).then(()=>{ console.log(2) }) 思考一个问题1 在JS事件循环机制触发前，即JS同步代码执行阶段，上面两个then都会执行吗？还是只执行第一个then？ 答：两个then都会执行，因为then方法调用是同步的 再思考一个问题2 在JS事件循环机制触发前，即
promise属性和prototype属性简介
weixin_40882674的博客
08-19 1103
promise属性 length：打印出来为1 name：打印出来为Promise all：将多个promise的实例包裹成一个实例，数组形势传入，遇到失败就直接调用失败，后续的操作不在关注。成功直接调用成功函数 ，返回一个数组。返回的数组和传入的promise的实例一样 race：将多个promise得实例包裹为一个实例，数组形势传入，返回实例中结果最快的哪一个 ， 不管失败还是成功的调用。al...
ES6——异步编程Promise全方位学习，从零到源码（.then()、.catch()、.finally()、Promise.all()）
cnailili的博客
02-05 2328
ES6——异步编程Promise学习（.then( )回调问题） 异步编程：开发中无论是在浏览器环境中还是在Node环境中，我们都会使用JavaScript我完成各种异步操作（定时器、事件、ajax、读取文件、事件等），伴随着异步编程就避免不了回调机制的产生；会产生很多问题； 异步编程问题：产生回调地狱，难于维护和扩展；try catch只能捕获同步代码中的异常；同步并发的异步会存在一定的问题； ...
手写Promise.js
11-13
Promise的手写代码，请配合博客《JavaScprit》异步编程（三）深入浅出Promise使用
BST_javaBST_https://bst.91_bstcom_
10-04
数据结构之二分搜索树，自己手写了二分搜索树底层源码，大家可以批评指正
rec.rar_rec_site:www.pudn.com_数字识别_脱机识别 matlab
09-24
脱机手写阿拉伯数字识别程序代码,本程序在MATLAB7.0下运行
js代码-手写promise.all
07-16
js代码-手写promise.all
基于Springboot+Vue的墙绘产品展示交易平台毕业源码案例设计.zip
04-27
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。系统化是必要的，设计网上系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于信息的维护和检索也不需要花费很多时间，非常的便利。 网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升数据的可靠性，让系统数据的错误率降至最低。 关键词：vue；MySQL；SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
99-青海大学大数据中心建设分享.pptx
04-27
99-青海大学大数据中心建设分享.pptx
TD-LTE载波聚合方案.docx
04-27
5G通信行业、网络优化、通信工程建设资料。
10份网络优化创新案例.zip
最新发布
04-27
SA语音回落与切换流程冲突解决.pdf 计费模式错误导致SA语音承载建立失败,pdf BSF网元bug导致SA用户VOLTE业务故障,pdf SA基站SCTP偶联IP配置不规范导致切换失败的问题处理,pdf 第一医院SA+NSA双模基站方案保障5G查房车应用,pdf SA未配置互操作场景下终端语音业务研究案例,pdf SA站点天馈隔离度问题导致上行速率不及预期,pdf SA组网下微信小视频卡顿影响感知案例,pdf 基于八步法定位SA掉线问题.pdf SA站点测试宏微切换异常事件,pdf
手写Promise.then方法
08-08
下面是手写一个简单的 Promise.then() 方法的实现方式： ```javascript function MyPromise(executor) { this.status = 'pending'; this.value = undefined; this.onResolvedCallbacks = []; const resolve = ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值