web前端高级JavaScript - 基于原生JS及PromiseA+规范实现手写Promise（兼容IE8）

墨蓝 2022-12-25 11:57 99阅读 0赞

> 基于原生js实现Promise  
> https://promisesaplus.com

(function(){ 
    	/* function resolvePromise(promiseNew, x, resolve, reject){ if(x === promiseNew) throw new TypeError("Chaining cycle detected for promise #<Promise>"); if(x instanceof Promise){//必须保证返回值是我们自己构建的Promise的实例 x.then(resolve, reject); }else{ //返回结果不是promise实例 resolve(x); } } */
    	//验证否是promise实例
    	var isPromise = function isPromise(obj){ 
    		if((obj !== null && typeof obj === 'object') || typeof obj === 'function'){ 
    			if(typeof obj.then === 'function'){ 
    				return true;
    			}
    		}
    		return false;
    	}
    	
    	var resolvePromise = function resolvePromise(promiseNew, x, resolve, reject){ 
    		if(x === promiseNew) throw new TypeError("Chaining cycle detected for promise #<Promise>");
    		if(isPromise(x)){ 
    			try{ 
    				x.then(resolve, reject);
    			}catch(err){ 
    				reject(err);
    			}
    			return;
    		}
    		resolve(x);
    		/* if((x !== null && typeof x === 'object') || typeof x === 'function'){ try{ var then = x.then; if(typeof then === 'function'){ //x.then(resolve, reject); then.call(x, resolve, reject) }else{ resolve(x); } }catch(err){ reject(err); } return; } //返回结果不是promise实例 resolve(x); */
    	}
    	
    	function Promise(executor){ 
    		//要求传递的executor必须是一个函数
    		if(typeof executor !== "function") throw new TypeError("Promise resolver "+executor+" is not a function");
    		var self = this;//当前Promise实例
    		//初始化状态和结果
    		self.state = 'pending';
    		self.result = undefined;
    		self.onFulfilledCallbacks = [];
    		self.onRejectedCallbacks = [];
    
    		//在执行resolve和reject时会改变该实例的状态和结果，所以这里定义一个change函数
    		var change = function change(state, result){ 
    			//状态只能修改一次，第二次更改无效
    			if(self.state !== "pending") return;//已经不是初始状态，说明已经改过了就不再处理
    			self.state = state;
    			self.result = result;
    			//通知集合中的方法执行
    			setTimeout(function(){ 
    				var callbacks = self.state === 'fulfilled' ? self.onFulfilledCallbacks : onRejectedCallbacks;
    				for(var i = 0; i < callbacks.length; i++){ 
    					var item = callbacks[i];
    					if(typeof item === 'function'){ 
    						item(self.result);
    					}
    				}				
    			});
    		}
    		
    		var resolve = function resolve(result){ 
    			change('fulfilled', result);
    		}
    		var reject = function reject(reason){ 
    			change('rejected', reason);
    		}
    		try{ 
    			executor(resolve, reject);
    		}catch(err){ 
    			change('rejected', err);
    		}
    	}
    	
    	Promise.prototype = { 
    		constructor: Promise,
    		customize: true,
    		/* * .then(onfulfilled, onrejected) * case1: 如果此时Promise实例已经成功或者失败，我们创建一个异步的微任务，等待同步任务结果，执行对应的函数 * case2：此时状态还是pending，我们需要把onfulfilled/onrejected保存起来，当后期状态修改了， * （例如：resolve/reject方法执行，再次通知保存的方法执行，而这个操作也应该是异步微任务） */
    		then: function(onfulfilled, onrejected){ 
    			//如果onfulfilled/onrejected不是函数：为了保证穿透顺延效果，需要为其设置默认函数，就是如果在后续调用then时可能没有给传onfulfilled/onrejected函数，那么我们需要设置一个默认的函数，保证顺延。
    			if(typeof onfulfilled !== 'function'){ 
    				onfulfilled  = function(value){ 
    					return value
    				}
    			}
    			if(typeof onrejected!== 'function'){ 
    				onrejected= function(value){ 
    					throw value;
    				}
    			}
    			var self = this;//promise 实例
    			var promiseNew = null; 
    			//创建一个新的Promise实例并返回
    			// + 执行resolve/reject控制成功或失败
    			// + 具体是成功还是失败，是由onfulfilled/onrejected决定
    			// + onfulfilled/onrejected函数执行不报错，应该让其状态为成功，让其值为函数执行的返回值
    			// + 如果onfulfilled/onrejected返回的也是Promise实例，那么promiseNew的状态和值和新返回的实例保持一致
    			// + 如果onfulfilled/onrejected返回的promise实例和promiseNew是同一个实例，则直接抛出异常
    			promiseNew = new Promise(function(resolve, reject){ 
    				switch(self.state){ 
    				case 'fulfilled':
    					setTimeout(function(){ 
    						try{ 
    							var x = onfulfilled(self.result);
    							resolvePromise(promiseNew, x, resolve,reject);
    						}catch(err){ 
    							reject(err);
    						}
    					});
    					break;
    				case 'rejected':
    					setTimeout(function(){ 
    						try{ 
    							var x = onrejectd(self.result);
    							resolvePromise(promiseNew, x, resolve,reject);
    						}catch(err){ 
    							reject(err);
    						}						
    					});
    					break;
    				default:
    					//把它存储到数组中，但是以后还要监听方法的执行结果，从而做其它事情
    					self.onFulfilledCallbacks.push(function(result){ 
    						try{ 
    							var x = onfulfilled(result);
    							resolvePromise(promiseNew, x, resolve,reject);
    						}catch(err){ 
    							reject(err);
    						}
    					});
    					self.onRejectedCallbacks.push(function(reason){ 
    						try{ 
    							var x = onrejectd(reason);
    							resolvePromise(promiseNew, x, resolve,reject);
    						}catch(err){ 
    							reject(err);
    						}		
    					});
    					break;					
    				}
    			});
    			return promiseNew;			
    		},
    		catch: function(onrejected){ 
    			var self = this;
    			return self.then(null, onrejected);
    		},
    	}
    	
    	Promise.resolve = function resolve(value){ 
    		return new Promise(function(resolve){ 
    			resolve(value);
    		});
    	}
    	
    	Promise.reject= function reject(value){ 
    		return new Promise(function(_,reject){ 
    			reject(value);
    		});
    	}
    	
    	Promise.all = function all(promises){ 
    		return new Promise(function(resolve, reject){ 
    			try{ 
    				var index = 0,
    					results = [],
    					len = promises.length;
    				for(var i = 0; i < len; i++){ 
    					(function(i){ 
    						var item = promises[i];
    						if(!isPromise(item)){ 
    							index++;
    							result[i] = item;
    							index === len ? resolve(results):null;//说明已经全部执行成功了
    							return;
    						}
    						item.then(function(result){ 
    							index++;
    							result[i] = result;
    							index === len ? resolve(results):null;//说明已经全部执行成功了
    						},function(reason){ 
    							reject(reason);
    						});
    					})(i);					
    				}
    			}catch(err){ 
    				reject(err);
    			}
    		});
    	}
    	//暴露API
    	//windows 环境
    	if(typeof window !== "undefined"){ 
    		window.Promise = Promise;
    	}
    	//node 环境
    	if(typeof module === "object" && typeof module.exports === "object"){ 
    		module.exports = Promise;
    	}
    })();

发表评论取消回复

表情：

评论列表（有 0 条评论，99人围观）

还没有评论，来说两句吧...

相关阅读

相关 js手写ajax 兼容IE浏览器

js手写ajax 最详细的手写ajax版本，兼容IE浏览器 request.js文件： import { getBrowser } from './in

- 日理万妓/ 2023年01月13日 15:00/ 0 赞/ 163 阅读

相关【JavaScript】手写一个promise

const PENDING = 'PENDING'; const RESOLVE = 'RESOLVE'; const REJECTED = 'REJE

曾经终败给现在/ 2023年01月03日 01:59/ 0 赞/ 139 阅读

相关 web前端高级JavaScript - 基于Promise封装Ajax库(axios)

//公共方法封装 (function(){ //创建一个空对象 var class2type = { }; //用来检测数据类型

桃扇骨/ 2022年12月28日 11:09/ 0 赞/ 180 阅读

相关 web前端高级JavaScript - 基于原生JS及PromiseA+规范实现手写Promise（兼容IE8）

> 基于原生js实现Promise > https://promisesaplus.com (function(){ / function resol

墨蓝/ 2022年12月25日 11:57/ 0 赞/ 100 阅读

相关 [JavaScript]根据PromiseA+规范手写Promise

一、Promise的声明首先呢，`Promise`肯定是一个类，我们就用`class`来声明。 • 由于 `new Promise((resolve, reject

今天药忘吃喽~/ 2022年12月11日 03:10/ 0 赞/ 147 阅读

相关用原生js手写实现promise

用原生js手写实现promise，看了网上很多实现，最终写出自己的简易版promise，记录一下 > 前言：使用及调用同原生Promise方法，只实现了then(reso

骑猪看日落/ 2022年10月01日 05:48/ 0 赞/ 220 阅读

相关 Promise原理及手写Promise

原理： > Promise 原理围绕以下三个问题进行解决： > > （有任何一步不了解的话请先往下看手写Promise，会一步步剖析原理，看完后再继续回顾这里！！） >

浅浅的花香味﹌/ 2022年05月28日 01:55/ 0 赞/ 257 阅读

相关 js手写Promise

先写一个简单的Promise： function Promise(executor) { var self = this; this

迷南。/ 2022年05月09日 14:52/ 0 赞/ 294 阅读

相关手写JS实现Promise

Promise是一个管理异步编程的方案，它是一个构造函数，每次使用可用new创建实例；它有三种状态：pending、fulfilled和rejected，这三种状态不会受...

朱雀/ 2020年05月10日 16:26/ 0 赞/ 933 阅读

相关手写JS实现Promise

Promise是一个管理异步编程的方案，它是一个构造函数，每次使用可用new创建实例；它有三种状态：pending、fulfilled和rejected，这三种状态不会受...

朱雀/ 2020年05月07日 09:18/ 0 赞/ 889 阅读