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

已于 2023-03-17 12:41:54 修改
阅读量663 收藏 1
点赞数
分类专栏： 手写JavaScript源码系列 文章标签： 手写promise promise原理 promise用法 promise面试题 promise.then
于 2023-03-13 12:45:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ThisEqualThis/article/details/129478149
版权
本文详细介绍了Promise.prototype.then方法的封装过程，包括在状态改变时执行回调、异步状态更新时的回调缓存、处理多个回调函数、同步和异步任务下的返回结果实现，以及then方法中回调函数作为微任务的执行。文章通过实例和代码解释了then方法的核心逻辑。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录


在这里插入图片描述
这篇文章我们将封装 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 的 异常穿透 一起讲解。

手写Promise 理解promise底层原理
Niall_Tonshall的博客
01-18 2579
本文参考了此博客，在网上浏览了很多关于Promise的相关资料，promise可以说是JavaScript的重难点了，其中，很是感谢阮一峰老师的博客讲解以及MDN上的文档教程 如对Promise不太熟悉的同学，可以先浏览Promise工作原理分析，如有不同意见，欢迎讨论，一起进步。 Promise基本流程 function doSomething(){ var p1 = new Promise(function (resolve, reject) { setTimeout(()=.
手写Promise系列之——all
wuxian_wj的博客
02-16 665
面试过程中少不了手写题，而promise相关的手写题也是很经常被问到，这里就来整理一下promise手写系列。 整个系列预计有以下几个函数的手写文章，今天先来实现all函数 all any race allSettled resolve+reject promise手写实现 Promise.all作用 Promise.all()方法用于将多个Promise实例包装成一个新的Promise实例。 const a = Promise.all([p1, p2, p3]) 最终a的状态由p1,p2,p3决定。
聊一聊看似简单的Promise.prototype.then()方法
qq_35382207的博客
08-20 879
Proise实例的then方法是定义在原型对象Promise.prototype上的，它的作用是为Promise实例添加状态改变时的回调函数。 该方法可以接收两个回调函数作为参数，其中第二个回调函数是可选的。第一个回调函数是 Promise 对象的状态变为 Resolved 时调用，第二个回调函数是 Promise 对象的状态变为 Rejected 时调用。 下面从以下几点进行说明： then 方法返回的是一个Promise实例，但是需要注意的是并不是原来调用它的那个Promise实例而是一个...
Promise 原型方法Promise.prototype.then()
陈开心的博客
11-11 1386
then() 方法返回一个 Promise。它最多需要有两个参数：Promise 的成功和失败情况的回调函数。 语法 p.then(onFulfilled[, onRejected]); p.then(value => { // fulfillment }, reason => { // rejection }); 参数： onFulfilled |可选。是一个函数，当 ...
手写promise，promise.then记录
最新发布
bossweiga的博客
04-14 293
在构造函数内部定义resolve和reject两个方法，当然也可以通过bind的方式绑定this,但是其实也是每次重新返回一个新韩淑，结果是一样的。* 在新的返回的promise里，往队列里面去push当前的状态，即onFulfilled和onRejected，resolve和reject。* 这三种状态我们在一开始可以提前定义好，如果是放在代码里面去填入，这种硬编码的风格，会造成后期维护困难，* 判断当前状态，调用handlCallBack回调函数，里面传入，执行函数，resolve，reject。
第3集丨Promise.prototype.then
秋堂主的博客
07-06 201
Promise 实例具有then方法，也就是说，then 方法是定义在原型对象Promise.prototype上的。它的作用是为Promise实例添加状态改变时的回调函数。前面说过，then 方法的第一个参数是状态的回调函数，第二个参数是状态的回调函数，它们都是可选的。then 方法返回的是一个新的Promise实例。因此可以采用链式写法，即then方法后面再调用另一个then方法。......
手写Promise-then方法多次调用添加多个处理函数
往事不回头,余生不将就
09-24 908
前言 在上篇文章中为大家揭示了，怎么处理异步情况，在本篇文章中揭秘如何多次调用then方法并添加多个处理函数 代码演示 //设置promise 状态 const PENDING = "pending"; //等待状态 const FULFILLED = 'FULFILLED'; //成功状态 const REJECTED = 'rejected'; //失败状态 class MyPromise { constructor(executor) { //立即调用函数 .
javascript基础学习系列一百六十二： Promise.prototype.then
wanmeijuhao的博客
01-19 437
Promise.prototype.then()是为期约实例添加处理程序的主要方法。onRejected 处理程序也与之类似：onRejected 处理程序返回的值也会被 Promise.resolve()包装。在返回新期约实例方面，Promise.prototype.catch()的行为与 Promise.prototype.then()的 onRejected 处理程序是一样的。如果没有显式的返回语句，则 Promise.resolve()会包装默认的返回值 undefined。
基于JavaScript的手写Promise解析与实现：掌握异步编程的核心工具
02-12
文章首先解释了创建js文件以及利用IIFE（立即执行函数表达式）封装Promise来保护局部变量的必要性。随后分别讲述了Promise构造函数的创建、Promise原型链上的then和catch这两个用于操作Promise实例状态变化的关键...
【Promise】自定义 - 手写Promise - Promise.all - Promise(executor)
YK菌的博客
03-07 4368
文章目录3. 自定义(手写)Promise 3. 自定义(手写)Promise
【JS】把Promise手写明白！
zhaohb2016的博客
09-01 637
就是说，把这个最爱考的手写系列给它整明白！总结加理解加多复习，我就不信还能有什么别的花样！
Promise.prototype.then().then()学习
黄彪博客
06-11 458
文章目录一、问题描述二、介绍 Promise.prototype.then方法介绍then 中的回调函数 返回值三、解析代码 一、问题描述 最近审核一个同事的代码如下，感觉Promise.all()用法使用有点新奇，与我平时使用不一致，效果应该是没有问题的，不然测试就会测试出来 // 防控圈切换场景，支持按防控圈，资源类型过滤统计 queryResource (bClear) { const params = { } let _resCamera = [] let _resPolice =
promise.prototype.then方法
窄门狭路的博客
01-06 854
promise.prototype.then方法具体讲解 then方法有2个参数，第一个是成功的回调，第二个是失败的回调，then方法会返回一个新的Promise实例，所以可以进行链式调用，并且then方法接收的是成功还是失败可以通过上一个Promise的状态判断。 promise.then(onFulfilled, onRejected) 参数要求 1.1 onFulfilled 必须是函数类型, 如果不是函数, 应该被忽略. 1.2 onRejected 必须是函数类型, 如果不是函数, 应该被忽
浅析Promise的then方法
weixin_57396733的博客
05-01 6831
1.关于then then方法的作用是为Promise对象添加状态改变时的回调函数。 2.then的返回值 then()方法的返回值也是一个promise对象，所以它支持链式写法。但是要注意的是它的返回值是一个新的promise对象，与调用then方法的并不是同一个对象。 那么既然 p2也是一个promise对象，那么，p2的状态（promiseStatus）和值(promiseValue)又由什么决定呢？我们先上结论，随后分别逐一验证。 3.p2的状态和值的确定规则 （1）当p1的状态是p
手写Promise（原生Promise剖析二--then方法的封装）
weixin_46886227的博客
01-04 631
前言：在上一篇文章中我们已经基本了解到Promise是什么以及Promise能干什么。并且我们已经基本构建出了一个Promise对象的基本结构。 现在我们需要知道什么是then()方法，并且then()方法有什么作用，有一定Promise基础的人一定知道，then()方法是在创建Promise对象之后，可以通过Promise实力对象调用的一个处理回调的函数，其中，包含成功的回调（value => {}），失败的回调（reason =>{}）。同上一篇文章中讲到的状态改变，调用的回调函数是同一个
手写Promise
qq_45517916的博客
03-09 271
//js const PENDING = 'pending'; const RESOLVED = 'resolved'; const REJECTED = 'rejected'; function MyPromise(fn) { // 保存初始化状态 var self = this; // 初始化状态 this...
promise中的.then方法【待完善】
热门推荐
大小曲奇的博客
06-07 1万+
Promise 是抽象的异步处理对象 构造方法： Promise 有三个状态：  上面我们提到 Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 和 .   resolve函数的作用是，将 Promise 对象的状态从 未处理 变成 处理成功 (unresolved => resolved)， 在异步操作成功时调用，并将异步操作的结果作为参数传递出去。   reject函数的作用是，将 Promise 对象的状态从 未处理 变成 处理失败 (unresolved => rejected
手写Promise.then方法
weixin_43484007的博客
06-08 702
我们可以用 Promise.prototype.then()方法将进一步的操作与一个变为已敲定状态的 promise 关联起来。 Promise.then() 方法需要两个参数，第一个参数作为处理已成功状态的回调函数，而第二个参数则作为处理已失败状态的回调函数。每一个 .then() 方法还会返回一个新生成的 promise 对象，这个对象可被用作链式调用，就像这样： 当 .then() 中缺少能够返回 promise 对象的函数时，链式调用就直接继续进行下一环操作。由上可知： .then() 方法返回一个
手写promise以及 .then方法
qq_53157160的博客
08-27 274
手写一个promise，学习封装过程以及思想以及细节处理
手写promise函数
04-11
好的，关于手写实现Promise函数，其实Promise是一种异步编程的解决方案，它的本质是对回调函数的封装，可以更加优雅和简洁地...以上就是一个简单的手写Promise函数的实现，它是基于回调函数的封装实现的异步编程方案。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值