手动实现Promise

最新推荐文章于 2024-08-18 22:56:24 发布
最新推荐文章于 2024-08-18 22:56:24 发布
阅读量716 收藏
点赞数 1
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41709082/article/details/104731726
版权

实现Promise

1.最近写代码的时候使用到很多promise，于是好奇promise 内部是怎么实现的，是怎么运转的。所以决定自己参考源码理解来实现一下。

  • 从使用方法 new Promise(function(resolve,reject){…}); 可以知道Promise 构造函数接收一个函数作为参数，并且构造函数内部会有resolve,与reject 方法 作为参数。
class MyPromise {

	constructor(fn){
		if(typeof fn !== 'function'){
			throw new Error('Promise resolver undefined is not a function');
		}
		fn(this.resolve.bind(this),this.reject.bind(this));
	}
	resolve(status){

	}

	reject(status){

	}

}
  • 从promise的特性可以知道 promise 有3个状态 执行成功 => fulfilled，执行失败 => rejected, 执行中 => pending. 所以我们还需要定义一个 promise状态属性。同时需要一个promise的value值。
    在这里插入图片描述
  • 我们new 一个 promise 发现 它的状态值的默认值为 pending ,它的值默认为 undefined 所以将上述代码完善。
class MyPromise {

	constructor(fn){
		if(typeof fn !== 'function'){
			throw new Error('Promise resolver undefined is not a function');
		}
		this.promiseStatus = 'pending'; //初始化promise 的状态
		this.promiseValue = 'undefined'; //初始化promise 的值
		fn(this.resolve.bind(this),this.reject.bind(this));
	}
	resolve(value){

	}

	reject(value){

	}

}
  • 接下来我们来完善 promise 的 resolve 方法，从使用上我们知道 resolve 方法接收一个任意类型的值，并且会将它赋值给 promise的value,同时执行完 resolve 之后会将promise 的状态值修改为 fulfilled。reject 方法同理
class MyPromise {

	constructor(fn){
		if(typeof fn !== 'function'){
			throw new Error('Promise resolver undefined is not a function');
		}
		this.promiseStatus = 'pending'; //初始化promise 的状态
		this.promiseValue = 'undefined'; //初始化promise 的值
		fn(this.resolve.bind(this),this.reject.bind(this));//此处用 bind 方法 绑定方法的 this 指向 为 当前promise对象
	}
	resolve(value){
		if(this.promiseStatus !== 'pending') return; // promise的状态值 只能 由pending => fulfiled 或 pending => rejected,并且状态一旦更改，就不能再更改了。 所以此处将 非pending 状态的情况排除
		
		this.promiseStatus = 'fulfiled'; //将状态 修改为 执行成功
		this.promiseValue = value;	
	
	}
	// 同理 实现 reject
	reject(value){
		if(this.promiseStatus !== 'pending') return; 
		this.promiseStatus = 'rejected';
		this.promiseValue = value;
	}
}
  • 上述状态更改处理 少考虑了 当传入的 是 promise 对象的情况
  • 我们使用 Promise 来测试一下
    在这里插入图片描述
    在这里插入图片描述
  • 发现 当resolve 方法 传入的参数为 promise 对象时，此时Promise 的状态和值 会依赖与 传入的Promise对象的状态和值。
  • 而 reject 方法 传入的参数为Promise 对象时，状态不会受传入的Promise对象的状态影响，值直接等于传入的Promise对象，而不是 传入的Promise的值。
  • 但是二者都会让 传入的Promise执行完成之后，再进行后续的操作。
  • 根据上述的结果 对Promise resolve 和 reject 进行改进, 由于 reject方法 改变状态不受 传入 Promise对象的状态影响，所以reject是不需要更改。
class MyPromise {

	constructor(fn){
		if(typeof fn !== 'function'){
			throw new Error('Promise resolver undefined is not a function');
		}
		this.promiseStatus = 'pending'; //初始化promise 的状态
		this.promiseValue = 'undefined'; //初始化promise 的值
		fn(this.resolve.bind(this),this.reject.bind(this));//此处用 bind 方法 绑定方法的 this 指向 为 当前promise对象
	}
	resolve(value){
		if(this.promiseStatus !== 'pending') return; // promise的状态值 只能 由pending => fulfiled 或 pending => rejected,并且状态一旦更改，就不能再更改了。 所以此处将 非pending 状态的情况排除
		
		this.promiseStatus = 'fulfiled'; //将状态 修改为 执行成功
		if(value instanceof MyPromise){  //判断MyPromise 是否在value的原型链上， 存在说明 是MyPromise 构造出来的对象
			/*
				此处 需要做的操作就是  将传入的Promise 对象 执行完成之后再改变值，此时我们要使用到Promise的then方法确保传入的Promise 执行完成。我们下面就来实现 then方法
			*/
			
			
		}else{ //非Promise 对象 直接修改
			this.promiseValue = value;	
		}
	}
	// 同理 实现 reject     
	reject(value){
		if(this.promiseStatus !== 'pending') return; 
		this.promiseStatus = 'rejected';
		this.promiseValue = value;
	}
}
  • 下面来实现 then方法，首先需要知道的是then 方法会添加成功回调，以及失败回调。当resolve执行时，就会依次执行所有 then 方法添加（注册）的成功回调函数，当reject执行时，就会一次执行所有 then 方法 添加的失败回调函数。
    在这里插入图片描述
  • 由上述执行结果 可以得出 then 方法会返回一个 新的 Promise 对象，而不是在之前的Promise对象上进行值的更改，而这个新的 Promise对象 的值 就是 传入 then 方法 内的 回调的 返回值。
  • 下面进行 then方法的实现
class MyPromise {

	constructor(fn){
		if(typeof fn !== 'function'){
			throw new Error('Promise resolver undefined is not a function');
		}
		this.promiseStatus = 'pending'; //初始化promise 的状态
		this.promiseValue = 'undefined'; //初始化promise 的值
		this.fulfilledQueue = []; // 用于存储 then 方法注册的 成功回调
		this.rejectedQueue = [];// 用于存储 then 方法 注册的 失败回调
		fn(this.resolve.bind(this),this.reject.bind(this));//此处用 bind 方法 绑定方法的 this 指向 为 当前promise对象
	}
	resolve(value){
		if(this.promiseStatus !== 'pending') return; // promise的状态值 只能 由pending => fulfiled 或 pending => rejected,并且状态一旦更改，就不能再更改了。 所以此处将 非pending 状态的情况排除
		
		this.promiseStatus = 'fulfiled'; //将状态 修改为 执行成功
		if(value instanceof MyPromise){  //判断MyPromise 是否在value的原型链上， 存在说明 是MyPromise 构造出来的对象
			/*
				此处 需要做的操作就是  将传入的Promise 对象 执行完成之后再改变值，此时我们要使用到Promise的then方法确保传入的Promise 执行完成。我们下面就来实现 then方法
			*/
			
			
		}else{ //非Promise 对象 直接修改
			this.promiseValue = value;	
		}
	}
	// 同理 实现 reject     
	reject(value){
		if(this.promiseStatus !== 'pending') return; 
		this.promiseStatus = 'rejected';
		this.promiseValue = value;
	}
	then(successCallBack,failCallBack){
		return new MyPromise((newResolve,newReject)=>{  // 此处使用箭头函数 可以确保 this 该方法内 this 指向 调用 then 方法的 promise 对象
			// 封装一个 执行成功的（resolve方法触发） 回调函数
			const onFulfilled = value =>{
				if(typeof successCallBack !== 'function'){
					newResolve(value);  //如果 then方法传入的参数不是函数 那么直接按上一个Promise 的值作为then方法返回新的Promise的值
				}else{
					 //是函数 就直接执行，并且将执行结果（函数返回值） 作为 新的promise的value抛出
                     let result =  succCallBack(value);
                     if(result instanceof  MyPromise){ //如果返回值是一个promise 对象则需要等该promise执行完成(状态值不为pending),将执行完的结果作为 新的promise的value值

	                     result.then(val=>{
	                           newResolve(val);
	                     },err=>{
	                           newReject(err);
	                      })

                      }else{
                          newResolve(result);
                      }
				}
			}
			//封装一个 执行失败的 （reject方法触发） 回调函数
			const onRejected = error =>{
				if(typeof failCallBack !== 'function'){
                     newReject(error);
				}else{
					 const result = failCallBack(error);
					 if(result instanceof  MyPromise){
					      result.then(val=>{
                             newReject(val);
						  },err=>{
                             newReject(err);
						  })
					 }else{
                           newReject(error);
					 } 
				}
			}
			switch(this.promiseStatus){  // 根据promise 状态值来判断 执行相应的操作
				case 'pending':  //当状态为pending 时 将 上述函数 加入对应的 队列 等待被执行
					this.fulfilledQueue.push(onFulfilled);
                    this.rejectedQueue.push(onRejected);
					break;
				case 'fulfilled':
					onFulfilled(this.promiseValue);
					break;
				case 'rejected':
					onRejected(this.promiseValue);
					break;
			}			
				
		})
	}
}
  • then 方法实现了，再将 resolve 方法完善
class MyPromise {

	constructor(fn){
		if(typeof fn !== 'function'){
			throw new Error('Promise resolver undefined is not a function');
		}
		this.promiseStatus = 'pending'; //初始化promise 的状态
		this.promiseValue = 'undefined'; //初始化promise 的值
		this.fulfilledQueue = []; // 用于存储 then 方法注册的 成功回调
		this.rejectedQueue = [];// 用于存储 then 方法 注册的 失败回调
		fn(this.resolve.bind(this),this.reject.bind(this));//此处用 bind 方法 绑定方法的 this 指向 为 当前promise对象
	}
	resolve(value){
		const run = (()=>{
			let thenCallBack='';
			const runFulfilled = (value)=>{  //接收 resolve传入的 value值
				while(thenCallBack = this.fulfilledQueue.shift()){ //每次都取出队列第一个then 回调 进行执行  直到所有then 方法的成功回调方法执行完成
					typeof thenCallBack === 'function' && thenCallBack(value);
				}
			}
			const runRejected = (error) =>{
				while(thenCallBack = this.rejectedQueue.shift()){
					typeof thenCallBack  === 'function' && thenCallBack(error);
				}
			}
			// 利用闭包  私有化 上述 属性 和方法
			return ()=>{
				if(this.promiseStatus !== 'pending') return; // promise的状态值 只能 由pending => fulfiled 或 pending => rejected,并且状态一旦更改，就不能再更改了。 所以此处将 非pending 状态的情况排除
		
			  	this.promiseStatus = 'fulfiled'; //将状态 修改为 执行成功
				if(value instanceof MyPromise){  //判断MyPromise 是否在value的原型链上， 存在说明 是MyPromise 构造出来的对象
			/*
				此处 需要做的操作就是  将传入的Promise 对象 执行完成之后再改变值，此时我们要使用到Promise的then方法确保传入的Promise 执行完成。我们下面就来实现 then方法
			*/
					value.then(res=>{
						this.promiseValue  = res; 
						runFulfilled(res);
					},err=>{
						this.promiseValue = err;
						this.promiseStatus = 'rejected';// 失败 时 同时要将 Promise 状态进行更改
						runRejected(err);
					})
			
				}else{ //非Promise 对象 直接修改
					this.promiseValue = value;	
				}
			}
		}).call(this);
		
	}
	// 同理 实现 reject     
	reject(value){
		if(this.promiseStatus !== 'pending') return; 
		this.promiseStatus = 'rejected';
		this.promiseValue = value;
	}
	then(successCallBack,failCallBack){
		return new MyPromise((newResolve,newReject)=>{  // 此处使用箭头函数 可以确保 this 该方法内 this 指向 调用 then 方法的 promise 对象
			// 封装一个 执行成功的（resolve方法触发） 回调函数
			const onFulfilled = value =>{
				if(typeof successCallBack !== 'function'){
					newResolve(value);  //如果 then方法传入的参数不是函数 那么直接按上一个Promise 的值作为then方法返回新的Promise的值
				}else{
					 //是函数 就直接执行，并且将执行结果（函数返回值） 作为 新的promise的value抛出
                     let result =  succCallBack(value);
                     if(result instanceof  MyPromise){ //如果返回值是一个promise 对象则需要等该promise执行完成(状态值不为pending),将执行完的结果作为 新的promise的value值

	                     result.then(val=>{
	                           newResolve(val);
	                     },err=>{
	                           newReject(err);
	                      })

                      }else{
                          newResolve(result);
                      }
				}
			}
			//封装一个 执行失败的 （reject方法触发） 回调函数
			const onRejected = error =>{
				if(typeof failCallBack !== 'function'){
                     newReject(error);
				}else{
					 const result = failCallBack(error);
					 if(result instanceof  MyPromise){
					      result.then(val=>{
                             newReject(val);
						  },err=>{
                             newReject(err);
						  })
					 }else{
                           newReject(error);
					 } 
				}
			}
			switch(this.promiseStatus){  // 根据promise 状态值来判断 执行相应的操作
				case 'pending':   //当状态为pending 时 将 上述函数 加入对应的 队列 等待被执行
					this.fulfilledQueue.push(onFulfilled);
                    this.rejectedQueue.push(onRejected);
					break;
				case 'fulfilled':
					onFulfilled(this.promiseValue);
					break;
				case 'rejected':
					onRejected(this.promiseValue);
					break;
			}			
				
		})
	}
}
  • 上述代码已经完成了promise 基本的使用方法，但是还有一个问题，上述实现中resolve 与 reject 方法是同步方法，而真正的Promise 的resolve 和 reject 方法 是异步的，所以再将上述 resolve 与 reject 方法进行改进。
class MyPromise {

	constructor(fn){
		if(typeof fn !== 'function'){
			throw new Error('Promise resolver undefined is not a function');
		}
		this.promiseStatus = 'pending'; //初始化promise 的状态
		this.promiseValue = 'undefined'; //初始化promise 的值
		this.fulfilledQueue = []; // 用于存储 then 方法注册的 成功回调
		this.rejectedQueue = [];// 用于存储 then 方法 注册的 失败回调
		fn(this.resolve.bind(this),this.reject.bind(this));//此处用 bind 方法 绑定方法的 this 指向 为 当前promise对象
	}
	resolve(value){
		const run = (()=>{
			let thenCallBack='';
			const runFulfilled = (value)=>{  //接收 resolve传入的 value值
				while(thenCallBack = this.fulfilledQueue.shift()){ //每次都取出队列第一个then 回调 进行执行  直到所有then 方法的成功回调方法执行完成
					typeof thenCallBack === 'function' && thenCallBack(value);
				}
			}
			const runRejected = (error) =>{
				while(thenCallBack = this.rejectedQueue.shift()){
					typeof thenCallBack  === 'function' && thenCallBack(error);
				}
			}
			// 利用闭包  私有化 上述 属性 和方法
			return ()=>{
				if(this.promiseStatus !== 'pending') return; // promise的状态值 只能 由pending => fulfiled 或 pending => rejected,并且状态一旦更改，就不能再更改了。 所以此处将 非pending 状态的情况排除
		
			  	this.promiseStatus = 'fulfiled'; //将状态 修改为 执行成功
				if(value instanceof MyPromise){  //判断MyPromise 是否在value的原型链上， 存在说明 是MyPromise 构造出来的对象
			/*
				此处 需要做的操作就是  将传入的Promise 对象 执行完成之后再改变值，此时我们要使用到Promise的then方法确保传入的Promise 执行完成。我们下面就来实现 then方法
			*/
					value.then(res=>{
						this.promiseValue  = res; 
						runFulfilled(res);
					},err=>{
						this.promiseValue = err;
						this.promiseStatus = 'rejected';// 失败 时 同时要将 Promise 状态进行更改
						runRejected(err);
					})
			
				}else{ //非Promise 对象 直接修改
					this.promiseValue = value;	
				}
			}
		}).call(this);
		setTimeout(run);
	}
	// 同理 实现 reject     
	reject(value){
		if(this.promiseStatus !== 'pending') return; 
		this.promiseStatus = 'rejected';

		const run = (()=>{
			let thenCallBack = '';
			const runFulfilled = (value)=>{  //接收 resolve传入的 value值
				while(thenCallBack = this.fulfilledQueue.shift()){ //每次都取出队列第一个then 回调 进行执行  直到所有then 方法的成功回调方法执行完成
					typeof thenCallBack === 'function' && thenCallBack(value);
				}
			}
			const runRejected = (error) =>{
				while(thenCallBack = this.rejectedQueue.shift()){
					typeof thenCallBack  === 'function' && thenCallBack(error);
				}
			}
			return ()=>{
				if(this.promiseStatus !== 'pending') return; // promise的状态值 只能 由pending => fulfiled 或 pending => rejected,并且状态一旦更改，就不能再更改了。 所以此处将 非pending 状态的情况排除
				this.promiseStatus = 'rejected'; //将状态 修改为 执行成功
				if(value instanceof MyPromise){
					this.promiseValue = value.then(res=>{//reject 方法 不依赖 传入的Promise 状态值所以此处即便传入的Prmise对象状态为 成功 也不修改当前Promise 状态,并且以传入的Promise对象作为当前Promise的值runRejected(res);
						return res; 
					},err=>{
						runRejected(err);
						return err;
					});
				}else{
					this.promiseValue = value;
					runRejected(value);
				}
			}
		}).call(this);
		setTimeout(run);
	}
	then(successCallBack,failCallBack){
		return new MyPromise((newResolve,newReject)=>{  // 此处使用箭头函数 可以确保 this 该方法内 this 指向 调用 then 方法的 promise 对象
			// 封装一个 执行成功的（resolve方法触发） 回调函数
			const onFulfilled = value =>{
				if(typeof successCallBack !== 'function'){
					newResolve(value);  //如果 then方法传入的参数不是函数 那么直接按上一个Promise 的值作为then方法返回新的Promise的值
				}else{
					 //是函数 就直接执行，并且将执行结果（函数返回值） 作为 新的promise的value抛出
                     let result =  succCallBack(value);
                     if(result instanceof  MyPromise){ //如果返回值是一个promise 对象则需要等该promise执行完成(状态值不为pending),将执行完的结果作为 新的promise的value值

	                     result.then(val=>{
	                           newResolve(val);
	                     },err=>{
	                           newReject(err);
	                      })

                      }else{
                          newResolve(result);
                      }
				}
			}
			//封装一个 执行失败的 （reject方法触发） 回调函数
			const onRejected = error =>{
				if(typeof failCallBack !== 'function'){
                     newReject(error);
				}else{
					 const result = failCallBack(error);
					 if(result instanceof  MyPromise){
					      result.then(val=>{
                             newReject(val);
						  },err=>{
                             newReject(err);
						  })
					 }else{
                           newReject(error);
					 } 
				}
			}
			switch(this.promiseStatus){  // 根据promise 状态值来判断 执行相应的操作
				case 'pending':   //当状态为pending 时 将 上述函数 加入对应的 队列 等待被执行
					this.fulfilledQueue.push(onFulfilled);
                    this.rejectedQueue.push(onRejected);
					break;
				case 'fulfilled':
					onFulfilled(this.promiseValue);
					break;
				case 'rejected':
					onRejected(this.promiseValue);
					break;
			}			
				
		})
	}
}
  • 上述 使用 setTimeout 来实现 异步调用，实现异步执行的问题。
    但是会出现执行顺序异常的问题 如下述代码
    在这里插入图片描述
    正常执行顺序应该为
    在这里插入图片描述
    应该先执行 promise 的回调，再执行定时器 （原因是因为 promise 注册的任务为 微任务 而 setTimeout 为宏任务，具体参考js 的事件循环机制）
  • 根据上述问题，我们继续改进。
  • 这里不能再使用到 setTimeout 这类的宏任务来实现promise ，应该使用到微任务来实现。
  • 所有微任务 大概只有 promise / process.nextTrick/MutationObserver , 既然我们是实现 promise 当然不能使用到正常的promise , 而 process.nextTrick 方法只有在node 环境中才存在，所以最终我们只能使用MutationObserver 方法来实现。 实现代码如下
class MyPromise {

	constructor(fn){
		if(typeof fn !== 'function'){
			throw new Error('Promise resolver undefined is not a function');
		}
		this.promiseStatus = 'pending'; //初始化promise 的状态
		this.promiseValue = 'undefined'; //初始化promise 的值
		this.fulfilledQueue = []; // 用于存储 then 方法注册的 成功回调
		this.rejectedQueue = [];// 用于存储 then 方法 注册的 失败回调
		fn(this.resolve.bind(this),this.reject.bind(this));//此处用 bind 方法 绑定方法的 this 指向 为 当前promise对象
	}
	resolve(value){
		const run = (()=>{
			let thenCallBack='';
			const runFulfilled = (value)=>{  //接收 resolve传入的 value值
				while(thenCallBack = this.fulfilledQueue.shift()){ //每次都取出队列第一个then 回调 进行执行  直到所有then 方法的成功回调方法执行完成
					typeof thenCallBack === 'function' && thenCallBack(value);
				}
			}
			const runRejected = (error) =>{
				while(thenCallBack = this.rejectedQueue.shift()){
					typeof thenCallBack  === 'function' && thenCallBack(error);
				}
			}
			// 利用闭包  私有化 上述 属性 和方法
			return ()=>{
				if(this.promiseStatus !== 'pending') return; // promise的状态值 只能 由pending => fulfiled 或 pending => rejected,并且状态一旦更改，就不能再更改了。 所以此处将 非pending 状态的情况排除
		
			  	this.promiseStatus = 'fulfiled'; //将状态 修改为 执行成功
				if(value instanceof MyPromise){  //判断MyPromise 是否在value的原型链上， 存在说明 是MyPromise 构造出来的对象
			/*
				此处 需要做的操作就是  将传入的Promise 对象 执行完成之后再改变值，此时我们要使用到Promise的then方法确保传入的Promise 执行完成。我们下面就来实现 then方法
			*/
					value.then(res=>{
						this.promiseValue  = res; 
						runFulfilled(res);
					},err=>{
						this.promiseValue = err;
						this.promiseStatus = 'rejected';// 失败 时 同时要将 Promise 状态进行更改
						runRejected(err);
					})
			
				}else{ //非Promise 对象 直接修改
					this.promiseValue = value;	
				}
			}
		}).call(this);
		let mutation = new MutationObserver(run); //MutationObserver 具体用法可以自行百度
		let element = document.createElement('span');
		mutation.observer(element,{
			attributes: true, childList: true, subtree: true
		});
		element.setAttribute('data','success'); //此处触发注册
	}
	// 同理 实现 reject     
	reject(value){
		if(this.promiseStatus !== 'pending') return; 
		this.promiseStatus = 'rejected';

		const run = (()=>{
			let thenCallBack = '';
			const runFulfilled = (value)=>{  //接收 resolve传入的 value值
				while(thenCallBack = this.fulfilledQueue.shift()){ //每次都取出队列第一个then 回调 进行执行  直到所有then 方法的成功回调方法执行完成
					typeof thenCallBack === 'function' && thenCallBack(value);
				}
			}
			const runRejected = (error) =>{
				while(thenCallBack = this.rejectedQueue.shift()){
					typeof thenCallBack  === 'function' && thenCallBack(error);
				}
			}
			return ()=>{
				if(this.promiseStatus !== 'pending') return; // promise的状态值 只能 由pending => fulfiled 或 pending => rejected,并且状态一旦更改，就不能再更改了。 所以此处将 非pending 状态的情况排除
				this.promiseStatus = 'rejected'; //将状态 修改为 执行成功
				if(value instanceof MyPromise){
					this.promiseValue = value.then(res=>{//reject 方法 不依赖 传入的Promise 状态值所以此处即便传入的Prmise对象状态为 成功 也不修改当前Promise 状态,并且以传入的Promise对象作为当前Promise的值runRejected(res);
						return res; 
					},err=>{
						runRejected(err);
						return err;
					});
				}else{
					this.promiseValue = value;
					runRejected(value);
				}
			}
		}).call(this);
		let mutation = new MutationObserver(run); //MutationObserver 具体用法可以自行百度
		let element = document.createElement('span');
		mutation.observer(element,{
			attributes: true, childList: true, subtree: true
		});
		element.setAttribute('data','failing'); //此处触发注册
	}
	then(successCallBack,failCallBack){
		return new MyPromise((newResolve,newReject)=>{  // 此处使用箭头函数 可以确保 this 该方法内 this 指向 调用 then 方法的 promise 对象
			// 封装一个 执行成功的（resolve方法触发） 回调函数
			const onFulfilled = value =>{
				if(typeof successCallBack !== 'function'){
					newResolve(value);  //如果 then方法传入的参数不是函数 那么直接按上一个Promise 的值作为then方法返回新的Promise的值
				}else{
					 //是函数 就直接执行，并且将执行结果（函数返回值） 作为 新的promise的value抛出
                     let result =  successCallBack(value);
                     if(result instanceof  MyPromise){ //如果返回值是一个promise 对象则需要等该promise执行完成(状态值不为pending),将执行完的结果作为 新的promise的value值

	                     result.then(val=>{
	                           newResolve(val);
	                     },err=>{
	                           newReject(err);
	                      })

                      }else{
                          newResolve(result);
                      }
				}
			}
			//封装一个 执行失败的 （reject方法触发） 回调函数
			const onRejected = error =>{
				if(typeof failCallBack !== 'function'){
                     newReject(error);
				}else{
					 const result = failCallBack(error);
					 if(result instanceof  MyPromise){
					      result.then(val=>{
                             newReject(val);
						  },err=>{
                             newReject(err);
						  })
					 }else{
                           newReject(error);
					 } 
				}
			}
			switch(this.promiseStatus){  // 根据promise 状态值来判断 执行相应的操作
				case 'pending':   //当状态为pending 时 将 上述函数 加入对应的 队列 等待被执行
					this.fulfilledQueue.push(onFulfilled);
                    this.rejectedQueue.push(onRejected);
					break;
				case 'fulfilled':
					onFulfilled(this.promiseValue);
					break;
				case 'rejected':
					onRejected(this.promiseValue);
					break;
			}			
				
		})
	}
}
  • 再进行执行
    在这里插入图片描述

执行顺序正常!!! 到此一个简易的promise 就实现了。

皮的狠
关注
专栏目录
手动实现完整的Promise
kkm486622296的博客
03-02 257
声明：本文是学习珠峰培训视频，模仿实现的对象Promise，通过了 promises-aplus-tests测试，文章最下面有截图。 constPENDING='pending';//初始态 constFULFILLED='fulFilled';//成功态 constREJECTED='rejected';//失败态 functionPromise(e...
手动实现一个Promise，简洁明了
Besam-juajua的博客
09-29 381
JS版本中，更新最大的一个版本就是ES6了，包括了const、let、模板字符串、箭头函数、类、Generator、Promise等等一系列语法糖。 在ES7没出来前，Promise是代替传统回调的主要方式，ES7后更多的是使用async-await，但Pomise的使用仍不在少数 本文章，我们一起实现一个Promise，你可能说，我直接用它就行了，干嘛自己写一个。非也，在我看来，理解代码思想...
Promise 原理
淡定如斯的博客
11-05 329
一. Promise规范 要实现一个Promise必须要遵守Promise规范，Promise的规范有很多，Promise/A，Promise/B，Promise/D 以及 Promise/A 的升级版 Promise/A+。ES6 中采用了 Promise/A+ 规范。 具体的 Promise/A+ 规范可以跳转这里 Promise的实现 接下来我们就实现一个Promise new Promise((resolve,reject)=>{ setTimeout(()=>{ console.
Promise以及手动实现
最新发布
weixin_42683639的博客
08-18 235
Promise原理及实现
手动实现promise
qq_35629054的博客
07-30 326
创建promise的基础框架 function MyPromise(executor) { function resolve(value) { } function reject(reason) { } try { // executor为new promise时传入的函数，executor的两个参数分别为成功回调函数和失败的回调 executor(resolve, reject) } catch (reason) { reject(rea.
手动实现 Promise
前端笔记——放弃很容易,但坚持一定很酷
04-26 347
【代码】手动实现 Promise。
js代码-手动实现Promise的Code
07-15
手动实现Promise，我们需要创建一个构造函数，接收一个执行器函数作为参数。执行器函数有两个参数，分别是resolve和reject，它们是用于改变Promise状态的函数。 ```javascript function MyPromise(executor) { // ...
算法基础：手动实现promiseAll
01-21
算法基础：手动实现promiseAll
js代码-手动实现一个 Promise
07-16
在JavaScript的世界里，Promise是异步编程的一种解决方案，它提供了比传统的回调函数更优雅的方式来处理复杂的异步操作。...理解并手动实现Promise不仅有助于提高对异步编程的理解，还能提升解决实际问题的能力。
手动实现Promise、Promise.all、Promise.resolve
xiaozidewawa的博客
03-17 553
// 基础功能： // 1、一个类 // 2、传递一个立即执行函数，该函数有两个参数均为方法，一个resolve，将pending状态转换为fulfilled，另一个reject，将pending状态转换为rejected； // 状态一旦改变，不能再次更改 // 3、实例具有then方法，两个参数，第一个是fulfilled状态调用的回调函数，第二个是rejected状态调用的回调函数 // 异步调用： // 4、当立即执行函数中，有异步调用时，在执行then方法时，状态仍未pending，此时需要..
Promise（手动实现）
风起
09-25 1073
文章目录1. `Promise`1.1 `Promise` 的 基本使用1.1.1 创建1.1.2 静态方法1.1.3` then`、`catch`1.1.4 `finally`1.2 `Promise`实现1.2.1 确定成员函数和成员变量1.2.2 准备工作1.2.3 定义状态1.2.4 定义`MP`的结构1.2.5 实现`MpPrototype`1.2.5.1 实现`resolve`和`reject`函数1.2.5.2 实现`then`1.2.5.3 进一步完善`resolve`和`reject`函数
手动实现简单的Promise及其基础功能
MiMeng的博客
04-01 630
文章目录一、Promise期约函数基本使用二、手动实现Promise基础功能1 声明方式2 实现简单的resolve和reject 一、Promise期约函数基本使用 function Ran(){ return new Promise((resolve, reject) => { setTimeout(() => { let ranDomNum = Math.random(); // 模拟可能成功或者失败的异步任务 ranDomNum > 0.5 ? resol
手动实现一个promise
JiangLittleBai的博客
10-12 184
问：你能手写一个Promise吗？ 。。。。。。。。。。。。时间静止了。。 Promise用了不少，但是从来没尝试自己实现下，好吧，开始写了 Promise的参数是一个函数，这个函数有2个参数，分别是resolve 和reject Promise的状态一开始是pending，满足某些条件是，状态变为resolved， 不满足某些条件时，状态变为rejected 通常通过将Promise作为一个构造函数，通过new 进行调用 会在then()中接收，resolve 和reject的返回信息 第一版
手动实现一个Promise
feral_coder的博客
07-20 206
废话不多说，直接上代码，水平有限，欢迎大家一起讨论！ 基本思想：使用异步队列存储处理函数，再根据传入的fn来改变Promise的状态，调用相应队列里的处理函数。 function Promise(fn) { //初始化 this.status = 'PENDING' this.value = undefined this.successQueues = [] ...
手动实现Promise方法（原理）
04-23 1219
我们在使用Promise，为了解决异步操作，去实现同步代码的作用 平时开发时候，我们很多时候，需要等待接口返回后，去做一些处理，或者借用返回值，再调用，，如果用传统的方法，我们容易陷入回调地狱的问题，代码的可读性也不是很好 现在我们来看下Promise的原理，是如何实现的 1、Promise是一个类，执行这个类的时候，需要传入一个执行器进去，执行器立即执行 class myPromise{ // executor执行器 constructor(executor){
手动实现一个简易版的promise
ZhuAiQuan的博客
03-10 412
理解基本的promise执行逻辑
手动实现简易的Promise
weixin_38378596的博客
01-10 327
const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' function MyPromise(fn) { const that = this //方便后面利用上下文，先把this赋值给that this.state = PENDING // 初始状态为pending this....
手动实现Promise--基础版
程序员界科比的博客
04-05 595
1.前言 Promise是ES6发布的异步编程的一种解决方案。比传统的解决方案--回调函数和事件，更加合理和强大。它有社区提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。本文详细讲一下怎么手动实现一个Promise。阅读前请确保已经熟练使用Promise，要不会有些费劲。本文较长，如想看懂请耐心，建议边看边自己写一遍。 原生Promise请看文档：Promise。 2.实现 ...
手动实现Promise的JavaScript代码解析
手动实现Promise首先需要定义一个构造函数，这个构造函数接受一个执行函数作为参数，执行函数内通常包含两个参数resolve和reject，这两个函数用于改变Promise的状态。 3. Promise.prototype.then方法: then方法是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值