手写Promise

搭建基础结构新建两个文件index.html以及promise.js在index.html中引入promise文件分别在两个文件中搭建基础结构// index.htmlconstpnewPromise((resolve,reject){resolve(success);});p.then((res){console.log(res);},(err){console.log(err);},);// promise.js// 声明构造函数functionPromise(executor){}// 添加then方法Promise.prototype.thenfunction(onFulfilled,onRejected){};补充executor内容// 声明构造函数functionPromise(executor){// resolve 函数functionresolve(data){}// reject 函数functionreject(data){}// 同步调用执行器函数因为Promise本身是同步的所以会立即执行executor(resolve,reject);}// 添加then方法Promise.prototype.thenfunction(onFulfilled,onRejected){};补充resolve和reject函数内容这两个函数中的this指向为window所以需要提前保存一下this// 声明构造函数functionPromise(executor){// 添加属性this.PromiseStatepending;// 状态默认未完成this.PromiseResultnull;// 结果值默认为空// 保存实例对象的this值const_thisthis;// resolve 函数functionresolve(data){// 1. 修改对象的状态PromiseState_this.PromiseStatefulfilled;// 2. 设置对象结果值PromiseResult_this.PromiseResultdata;}// reject 函数functionreject(data){// 1. 修改对象的状态PromiseState_this.PromiseStaterejected;// 2. 设置对象结果值PromiseResult_this.PromiseResultdata;}// 同步调用执行器函数因为Promise本身是同步的所以会立即执行executor(resolve,reject);}// 添加then方法Promise.prototype.thenfunction(onFulfilled,onRejected){};补充throw err的处理内容// index.htmlconstpnewPromise((resolve,reject){throwerror;});// promise.js// 声明构造函数functionPromise(executor){try{// 同步调用执行器函数因为Promise本身是同步的所以会立即执行executor(resolve,reject);}catch(error){// 修改对象的状态为失败reject(error);}}// 添加then方法Promise.prototype.thenfunction(onFulfilled,onRejected){};补充只改变一次状态的内容// 声明构造函数functionPromise(executor){// resolve 函数functionresolve(data){// 判断状态确保只能修改一次if(_this.PromiseState!pending)return;// 1. 修改对象的状态PromiseState_this.PromiseStatefulfilled;// 2. 设置对象结果值PromiseResult_this.PromiseResultdata;}// reject 函数functionreject(data){// 判断状态确保只能修改一次if(_this.PromiseState!pending)return;// 1. 修改对象的状态PromiseState_this.PromiseStaterejected;// 2. 设置对象结果值PromiseResult_this.PromiseResultdata;}}// 添加then方法Promise.prototype.thenfunction(onFulfilled,onRejected){};补充then方法回调执行的内容// 添加then方法Promise.prototype.thenfunction(onFulfilled,onRejected){if(this.PromiseStatefulfilled){onFulfilled(this.PromiseResult);}else{onRejected(this.PromiseResult);}};补充异步任务回调处理的内容因为代码执行是同步的存在setTimeout以后就成为了异步导致状态还没有改变就执行到了then方法又因为then方法里只有状态为fulfilled和rejected的处理函数所以导致状态为pending时的情况没有被处理。setTimeout是异步的所以需要等待1000毫秒过后再去执行then方法因此在pending状态的时候需要将then中的onFulfilled和onRejected方法暂时存储起来放入构造函数的callback中。当1000毫秒过后执行了setTimeout中的resolve方法触发了构造函数中定义的resolve函数这时状态已经变化可以通过判断callback中是否存在对应的处理函数就可以调用对应的回调方法。// index.htmlconstpnewPromise((resolve,reject){setTimeout((){resolve(success);},1000);});// promise.js// 声明构造函数functionPromise(executor){// 添加回调函数存储容器this.callback{};// resolve 函数functionresolve(data){// 判断状态确保只能修改一次if(_this.PromiseState!pending)return;// 1. 修改对象的状态PromiseState_this.PromiseStatefulfilled;// 2. 设置对象结果值PromiseResult_this.PromiseResultdata;// 判断回调函数是否存在存在则调用if(_this.callback.onFulfilled){_this.callback.onFulfilled(data);}}// reject 函数functionreject(data){// 判断状态确保只能修改一次if(_this.PromiseState!pending)return;// 1. 修改对象的状态PromiseState_this.PromiseStaterejected;// 2. 设置对象结果值PromiseResult_this.PromiseResultdata;// 判断回调函数是否存在存在则调用if(_this.callback.onRejected){_this.callback.onRejected(data);}}}// 添加then方法Promise.prototype.thenfunction(onFulfilled,onRejected){if(this.PromiseStatefulfilled){onFulfilled(this.PromiseResult);}if(this.PromiseStaterejected){onRejected(this.PromiseResult);}// 存储pending状态时的回调函数不让立即执行if(this.PromiseStatepending){this.callback{onFulfilled,onRejected,};}};补充多个then回调的内容// index.htmlconstpnewPromise((resolve,reject){setTimeout((){resolve(success);// reject(err);},1000);});p.then((res){console.log(res,---------19);},(err){console.log(err,---------23);},);p.then((res){console.log(res,---------30);},(err){console.log(err,---------33);},);// promise.js// 声明构造函数functionPromise(executor){// 添加回调函数存储容器this.callbacks[];// resolve 函数functionresolve(data){// 判断状态确保只能修改一次if(_this.PromiseState!pending)return;// 1. 修改对象的状态PromiseState_this.PromiseStatefulfilled;// 2. 设置对象结果值PromiseResult_this.PromiseResultdata;// 判断回调函数是否存在存在则调用_this.callbacks.forEach((item){item.onFulfilled(data);});}// reject 函数functionreject(data){// 判断状态确保只能修改一次if(_this.PromiseState!pending)return;// 1. 修改对象的状态PromiseState_this.PromiseStaterejected;// 2. 设置对象结果值PromiseResult_this.PromiseResultdata;// 判断回调函数是否存在存在则调用_this.callbacks.forEach((item){item.onRejected(data);});}}// 添加then方法Promise.prototype.thenfunction(onFulfilled,onRejected){if(this.PromiseStatefulfilled){onFulfilled(this.PromiseResult);}if(this.PromiseStaterejected){onRejected(this.PromiseResult);}// 存储pending状态时的回调函数不让立即执行if(this.PromiseStatepending){this.callbacks.push({onFulfilled,onRejected,});}};补充then方法的返回值-同步因为then的返回值类型是Promise所以只需要在then方法里返回一个Promise对象即可返回值的几种情况1当返回值为非Promise类型则直接返回成功状态2当返回值为Promise类型则返回值依赖于回调的返回值3当回调发生错误则直接返回失败状态// 添加then方法Promise.prototype.thenfunction(onFulfilled,onRejected){// then方法返回的是一个Promise对象通过return new Promise来创建returnnewPromise((resolve,reject){if(this.PromiseStatefulfilled){try{// 通过onFulfilled可以获取到回调函数的返回值constresultonFulfilled(this.PromiseResult);// 根据回调函数的值来判断返回结果if(resultinstanceofPromise){// 是Promise类型则具有then方法result.then((v){resolve(v);},(e){reject(e);},);}else{// 不为Promise类型则直接返回成功resolve(result);}}catch(error){// 处理throw抛出的异常reject(error);}}if(this.PromiseStaterejected){try{constresultonRejected(this.PromiseResult);if(resultinstanceofPromise){result.then((v){resolve(v);},(e){reject(e);},);}else{resolve(result);}}catch(error){reject(error);}}// 存储pending状态时的回调函数不让立即执行if(this.PromiseStatepending){this.callbacks.push({onFulfilled,onRejected,});}});};补充then方法的返回值-异步Promise.prototype.thenfunction(onFulfilled,onRejected){const_thisthis;// then方法返回的是一个Promise对象通过return new Promise来创建returnnewPromise((resolve,reject){// 存储pending状态时的回调函数不让立即执行if(this.PromiseStatepending){this.callbacks.push({// 改造成这样能保证异步函数依旧能正常执行在这个基础上再进行返回值的处理// onFulfilled: function () {// onFulfilled(_this.PromiseResult);// },// 对之前的存储方法进行改造同样是根据回调函数的返回值进行判断返回的是成功还是失败onFulfilled:function(){try{constresultonFulfilled(_this.PromiseResult);if(resultinstanceofPromise){result.then((v){resolve(v);},(e){reject(e);},);}else{resolve(result);}}catch(error){reject(error);}},onRejected:function(){try{constresultonRejected(_this.PromiseResult);if(resultinstanceofPromise){result.then((v){resolve(v);},(e){reject(e);},);}else{resolve(result);}}catch(error){reject(error);}},});}});};then方法优化Promise.prototype.thenfunction(onFulfilled,onRejected){const_thisthis;// then方法返回的是一个Promise对象通过return new Promise来创建returnnewPromise((resolve,reject){// 封装函数functioncallback(type){try{// 通过type(onFulfilled)可以获取到回调函数的返回值constresulttype(_this.PromiseResult);// 根据回调函数的值来判断返回结果if(resultinstanceofPromise){// 是Promise类型则具有then方法result.then((v){resolve(v);},(e){reject(e);},);}else{// 不为Promise类型则直接返回成功resolve(result);}}catch(error){// 处理throw抛出的异常reject(error);}}if(this.PromiseStatefulfilled){callback(onFulfilled);}if(this.PromiseStaterejected){callback(onRejected);}// 存储pending状态时的回调函数不让立即执行if(this.PromiseStatepending){this.callbacks.push({// 改造成这样能保证异步函数依旧能正常执行在这个基础上再进行返回值的处理// onFulfilled: function () {// onFulfilled(_this.PromiseResult);// },onFulfilled:function(){callback(onFulfilled);},onRejected:function(){callback(onRejected);},});}});};