手写一个Promise,实现基本的链式调用

手写 Promise 不废话上代码

	// 基础框架
	function myPromise(promiseCallback) {
		let self = this;
		self.status = "pending"; 				// 状态
		self.value = null; 						// 成功结果
		self.error = null; 						// 失败原因
		self.onResolvedCallbacks = [];
		self.onRejectedCallbacks = [];

		// 成功的回调
		function resolve(value) {
			if (self.status === 'pending') {	// 状态处理
				self.status = 'fulfilled'; 		// 保存成功的状态
				self.value = value; 			// 保存成功的结果
				self.onResolvedCallbacks.forEach(item => item(value)); // 方法依次取出
			}
		}
		// 失败的回调
		function reject(error) {
			if (self.status === 'pending') {
				self.status = 'rejected'; 		// 保存错误的状态
				self.error = error; 			// 保存错误的结果
				self.onRejectedCallbacks.forEach(item => item(error));
			}
		}
		// 立即执行promise参数的回调
		try {
			promiseCallback(resolve, reject);
		} catch (e) {
			reject(e);
		}
	}
	// 原型上注入then方法
	myPromise.prototype.then = function(onFulfilled, onRejected) {
		onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (value) => value;
		onRejected = typeof onRejected === "function" ? onRejected : (reason) => { throw reason };
		/*** 发布订阅模式 ***/
		if (this.status === "pending") {
			return new myPromise((resolve, reject) => {
				this.onResolvedCallbacks.push(() => {
					const fn = onFulfilled(this.value);
					fn instanceof myPromise ? fn.then(resolve, reject) : resolve(fn);
				});
				this.onRejectedCallbacks.push(() => {
					const fn = onRejected(this.error);
					fn instanceof myPromise ? fn.then(resolve, reject) : resolve(fn);
				});
			});
		}
		if (this.status === "fulfilled") {
			return new myPromise((resolve, reject) => {
				try {
					const fn = onFulfilled(this.value);
					fn instanceof myPromise ? fn.then(resolve, reject) : resolve(fn);
				} catch (err) { reject(err); }
			});
		}
		if (this.status === "rejected") {
			return new myPromise((resolve, reject) => {
				try {
					const fn = onRejected(this.error);
					fn instanceof myPromise ? fn.then(resolve, reject) : resolve(fn);
				} catch (error) { reject(error); }
			});	
		}
	}
	// 原型上注入catch方法
	myPromise.prototype.catch = function(onRejected) {
		return this.then(null, onRejected);
	}

	// 创建myPromise实例化对象
	let promiseTest = new myPromise((resolve, reject) => {
		console.log("myPromise1");
		setTimeout(e => resolve("myPromise1"), 300);
	});

	// 链式调用示例
	promiseTest
	.then(data => {
		console.log("then1:",data);
		return new myPromise((resolve, reject) => {
			console.log("myPromise2");
			setTimeout(e => resolve("promise2"), 300);
		});
	})
	.then(data => {
		console.log("then2:",data);
		return new myPromise((resolve, reject) => {
			console.log("myPromise3");
			setTimeout(e => resolve("promise3"), 300);
		});
	})
	.then(data => {
		console.log("then3:",data);
	})
	.catch(e => console.log(e))

在这里插入图片描述


手写 Promise 简要思路:

  1. 建立基本框架,即构建myPromise的构造函数,内部定义基本的属性,如状态、成功结果、失败原因,成功毁掉、失败回调等
  2. myPromise构造函数原型上增加then、catch等方法
  3. myPromise构造函数内执行其参数回调函数
  4. 进入成功或失败的回调函数中,修改状态
  5. then中执行发布订阅模式,then参数的回调方法进行存储

附:Promise 运行机制简述

在 JavaScript 中,Promise 是一种用于处理异步操作的对象。Promise 有三种状态:待定(pending)、已完成(fulfilled)和已拒绝(rejected)。一个 Promise 对象在创建后会一直处于待定状态,直到它被解决为止。

Promise 对象的运行机制如下:

  1. 创建 Promise 对象:通过调用 Promise 构造函数创建一个 Promise 对象,这个构造函数需要传入一个回调函数作为参数。这个回调函数包含两个参数:resolve 和 reject。
  2. 处理异步操作:在 Promise 对象中,异步操作是通过回调函数来实现的。当异步操作完成后,调用 resolve 方法将 Promise 对象的状态设置为已完成,或者调用 reject 方法将 Promise 对象的状态设置为已拒绝。
  3. 处理 Promise 对象的状态:当 Promise 对象的状态改变时,会触发 Promise 对象的 then 或 catch 方法。如果 Promise 对象的状态是已完成,then 方法会接收一个回调函数作为参数,这个回调函数会被调用,并且传入异步操作的结果作为参数。如果 Promise 对象的状态是已拒绝,catch 方法会接收一个回调函数作为参数,这个回调函数会被调用,并且传入错误信息作为参数。
  4. 链式调用:由于 Promise 对象的 then 和 catch 方法都会返回一个新的 Promise 对象,因此可以链式调用这些方法,处理异步操作的结果。

总的来说,Promise 对象的运行机制是通过创建 Promise 对象,处理异步操作,处理 Promise 对象的状态,以及链式调用 Promise 对象的 then 和 catch 方法来实现的。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值