手写一个简易的Promise

本文深入解析Promise的工作原理,从头开始实现一个简单的Promise类,包括其构造函数、状态管理、错误处理以及链式调用机制。
部署运行你感兴趣的模型镜像
;(function () {

	class Promise {

		const status = {
			pending: 0,
			fulfilled: 1,
			rejected: 2
		}

		constructor (executor) {
			//初始状态
			this._status = status.pending;
			this._value = null;   //记录resolve函数传入的值
			this._error = null;		//记录reject函数传入的值

			//收集成功状态要执行的函数
			this.resolvedArr = [];
			//收集失败状态要执行的函数
			this.rejectedArr = [];

			this._handler(executor);

		}

		//判断value有没有then函数,并且将then函数返回
		_getThen (value) {
			let type = typeof value;
			if (value && (type === 'object' || type === 'function')) {
				let then;
				if (then = value.then) {
					return then;
				}
				return null;
			}
		}


		//接收外部传入的函数,调用外部传入的函数
		_handler (executor) {
			let done = false;  //就是让函数值执行一次
			executor((value) => {
				if (done) return;
				done = true;

				//value有没有then函数,有then函数的话必须等value的then函数执行完毕之后才能调用_resolve函数
				let then = this._getThen(value);
				if (then) {
					//拿到对象的then之后,怎么知道这个promise对象完成了呢
					//在then函数上注册成功和失败函数就可以了
					return this._handler(then.bind(value)); 
				}

				this._resolve(value);
			}, (error) => {
				if (done) return;
				done = true;

				//error有没有then函数,有then函数的话必须等value的then函数执行完毕之后才能调用_resolve函数
				let then = this._getThen(error);
				if (then) {
					//拿到对象的then之后,怎么知道这个promise对象完成了呢
					//在then函数上注册成功和失败函数就可以了
					return this._handler(then.bind(error));
				}
				this._reject(error);
			})
		}

		_resolve (value) {
			setTimeout(() => {
				//把状态改为成功
				this._status = status.fulfilled;
				this._value = value;

				//执行所有注册的成功的函数
				this.resolvedArr.forEach(item => item(this._value));
			})
		}

		_reject (error) {
			setTimeout(() => {
				//把状态改为失败
				this._status = status.rejected;
				this._error = error;

				//执行所有注册的失败的函数
				this.rejectedArr.forEach(item => item(this._error));
			})
		}

		//收集注册成功状态或失败状态要执行的函数
		_done (resolvedFunc, rejectedFunc) {
			resolvedFunc = typeof resolvedFunc === 'function' ? resolvedFunc : null;
			rejectedFunc = typeof rejectedFunc === 'function' ? rejectedFunc : null;
			//pending阶段收集
			if (this._status === 0) {
				if (resolvedFunc) this.resolvedArr.push(resolvedFunc);
				if (rejectedFunc) this.rejectedArr.push(rejectedFunc);
			} else if (this._status === 1 && resolvedFunc) {   //直接执行
				resolvedFunc(this._value);
			} else if (this._status === 2 && rejectedFunc) {   //直接执行
				rejectedFunc(this._error);
			}
		}

		//非链式调用写法
		// then (resolvedFunc, rejectedFunc) {
		// 	this._done(resolvedFunc, rejectedFunc);
		// }
		
		//链式调用写法
		then (resolvedFunc, rejectedFunc) {
			return new Promise((resolve, reject) => {
			  this._done((value) => {  //收集成功执行函数
					if (typeof resolvedFunc !== 'function') {
						return resolve(value);
					}
					resolve(resolvedFunc(value));
				}, (error) => {  //收集失败执行函数
					if (typeof rejectedFunc !== 'function') {
						return reject(error);
					}
					reject(rejectedFunc(error));
				});
			})
			
		}

	}

	window.Promise = Promise;

})();

其他的一些Promise资料:

您可能感兴趣的与本文相关的镜像

Qwen-Image-Edit-2509

Qwen-Image-Edit-2509

图片编辑
Qwen

Qwen-Image-Edit-2509 是阿里巴巴通义千问团队于2025年9月发布的最新图像编辑AI模型,主要支持多图编辑,包括“人物+人物”、“人物+商品”等组合玩法

实现一个 `Promise` 对象的核心在于理解其状态管理、异步流程控制以及 `then` 和 `catch` 的链式调用机制。以下是一个简化版的手动实现,涵盖了 `Promise` 的基本功能:状态管理、`then` 方法、静态方法 `resolve`、`reject`、`all` 和 `race`。 ### 3.1 基本结构与状态管理 ```javascript const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'rejected'; class MyPromise { constructor(executor) { this.status = PENDING; this.value = undefined; this.reason = undefined; this.onFulfilledCallbacks = []; this.onRejectedCallbacks = []; const resolve = (value) => { if (this.status === PENDING) { this.status = FULFILLED; this.value = value; this.onFulfilledCallbacks.forEach(fn => fn()); } }; const reject = (reason) => { if (this.status === PENDING) { this.status = REJECTED; this.reason = reason; this.onRejectedCallbacks.forEach(fn => fn()); } }; try { executor(resolve, reject); } catch (error) { reject(error); } } then(onFulfilled, onRejected) { return new MyPromise((resolve, reject) => { if (this.status === FULFILLED) { setTimeout(() => { try { const result = onFulfilled(this.value); resolve(result); } catch (error) { reject(error); } }, 0); } if (this.status === REJECTED) { setTimeout(() => { try { const result = onRejected(this.reason); resolve(result); } catch (error) { reject(error); } }, 0); } if (this.status === PENDING) { this.onFulfilledCallbacks.push(() => { setTimeout(() => { try { const result = onFulfilled(this.value); resolve(result); } catch (error) { reject(error); } }, 0); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { const result = onRejected(this.reason); resolve(result); } catch (error) { reject(error); } }, 0); }); } }); } catch(onRejected) { return this.then(null, onRejected); } static resolve(value) { return new MyPromise((resolve) => resolve(value)); } static reject(reason) { return new MyPromise((_, reject) => reject(reason)); } static all(promises) { return new MyPromise((resolve, reject) => { let results = []; let completed = 0; promises.forEach((promise, index) => { promise.then( (value) => { results[index] = value; completed++; if (completed === promises.length) { resolve(results); } }, (error) => { reject(error); } ); }); }); } static race(promises) { return new MyPromise((resolve, reject) => { promises.forEach(promise => { promise.then(resolve, reject); }); }); } } ``` ### 3.2 使用示例 ```javascript const p = new MyPromise((resolve, reject) => { setTimeout(() => { resolve('Success!'); }, 1000); }); p.then(value => { console.log(value); // 输出: Success! }).catch(error => { console.error(error); }); ``` ### 3.3 静态方法使用示例 ```javascript // Promise.resolve MyPromise.resolve('Resolved').then(value => { console.log(value); // 输出: Resolved }); // Promise.reject MyPromise.reject('Rejected').catch(reason => { console.log(reason); // 输出: Rejected }); // Promise.all const p1 = MyPromise.resolve(3); const p2 = new MyPromise((resolve, reject) => { setTimeout(resolve, 100, 'foo'); }); const p3 = MyPromise.resolve(4); MyPromise.all([p1, p2, p3]).then(values => { console.log(values); // 输出: [3, 'foo', 4] }).catch(error => { console.error(error); }); // Promise.race const p4 = new MyPromise((resolve, reject) => { setTimeout(resolve, 500, 'one'); }); const p5 = new MyPromise((resolve, reject) => { setTimeout(resolve, 100, 'two'); }); MyPromise.race([p4, p5]).then(value => { console.log(value); // 输出: two }); ``` ### 3.4 实现要点说明 - **状态管理**:`Promise` 只能从 `pending` 状态变为 `fulfilled` 或 `rejected`,且一旦状态改变,就不能再变。 - **异步处理**:通过 `setTimeout` 模拟微任务队列,确保回调在当前执行栈清空后执行。 - **链式调用**:`then` 返回一个新的 `Promise`,允许链式调用,并传递前一个 `Promise` 的结果。 - **错误捕获**:通过 `catch` 方法捕获链中的任何错误,并终止后续的 `then` 执行[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值