步骤

1、 搭框架实现同步改变内部状态的三种情况 resolve(1) reject(2) throw ‘Error’ 只改变一次状态

  1. function Promise(excetor){
  2.     let _this = this;
  3.         _this.PromiseStatus = "pedding",
  4.         _this.PromiseResult = null,
  5.         _this.callbacks = [];
  7.     function resolve(value){
  8.        if(_this.PromiseStatus!=='pedding')return
  9.        _this.PromiseStatus = 'fulfilled' 
  10.        _this.PromiseResult = value;
  11.     }
  13.     function reject(reason){
  14.        if(_this.PromiseStatus!=='pedding')return
  15.        _this.PromiseStatus = 'rejected' 
  16.        _this.PromiseResult = reason;
  17.     }
  19.     try{
  20.       excetor(resolve,reject)  
  21.     }catch(error){
  22.        reject(error)
  23.        throw 'promise 内部错误' + error
  24.     }
  25. }

2、 实现内部只能改变一次状态 .then resolveFun rejectFun 加入异步执行

_

  1. function Promise(excetor){
  2.     let _this = this,
  3.         _this.PromiseStatus = "pedding",
  4.         _this.PromiseResult = null,
  5.         _this.callbacks = [];
  7.     function resolve(value){
  8.        if(_this.PromiseStatus!=='pedding')return
  9.        _this.PromiseStatus = 'fulfilled' 
  10.        _this.PromiseResult = value;
  11.        setTimeout(()=>{
  12.           _this.callbacks.forEach(item=>{
  13.             item.resolveFun()
  14.           })
  15.        })
  16.     }
  18.     function reject(reason){
  19.        if(_this.PromiseStatus!=='pedding')return
  20.        _this.PromiseStatus = 'rejected' 
  21.        _this.PromiseResult = reason;
  22.         setTimeout(()=>{
  23.           _this.callbacks.forEach(item=>{
  24.             item.rejectFun()
  25.           })
  26.        })
  27.     }
  29.     try{
  30.       excetor(resolve,reject)  
  31.     }catch(error){
  32.        reject(error)
  33.        throw 'promise 内部错误' + error
  34.     }
  35. }
  37. Promise.prototype.then(resolveFun,rejectFun){
  38.     if(_this.PromiseStatus === 'fulfilled'){
  39.         resolveFun(this.PromiseResult)
  40.     }
  41.     if(_this.PromiseStatus === 'rejected'){
  42.         rejectFun(this.PromiseResult)
  43.     }
  44.     if(_this.PromiseStatus === 'pedding'){
  45.         this.callbacks.push({
  46.           resolveFun,
  47.           rejectFun
  48.         })
  49.     }
  50. }

3、_对then方法返回结果进行处理(是否返回promise) 返回一个promise 对then里面的promise处理状态改变, 对状态改变添加异步, 多次then的处理 优化_resolveFun， rejectFun缺省的情况

_

  1. Promise.prototype.then = function(resolveFun,rejectFun){
  2.   let _this = this;
  3.   if(typeof resolveFun!=='function')resolveFun = value=>value;
  4.   if(typeof rejectFun!=='function') rejectFun = reason => {throw reason};
  6.   return new Promise((resolve,reject)=>{
  7.       function dealStatus(type){
  8.          try{
  9.            let result = type(_this.PromiseResult)
  10.            if(result instanceof Promise){
  11.              result.then(v=>{
  12.                resolve(v)
  13.              },r=>{
  14.                reject(r)
  15.              })
  16.            }else{
  17.              resolve(result)
  18.            }
  19.          }catch(error){
  20.            reject(error)
  21.          }
  22.       }
  23.       if(_this.PromiseStatus === 'fulfilled'){
  24.           setTimeout(()=>{
  25.              dealStatus(resolveFun)
  26.           })
  27.       }
  28.       if(_this.PromiseStatus === 'rejected'){
  29.          setTimeout(()=>{
  30.             dealStatus(rejectFun)
  31.           })
  32.       }
  33.       if(_this.PromiseStatus === 'pedding'){
  34.           this.callbacks.push({
  35.             resolveFun:function(){
  36.                 dealStatus(resolveFun)
  37.             },
  38.             rejectFun:function(){
  39.                dealStatus(rejectFun)
  40.             }
  41.           })
  42.       }
  43.   })
  44. }

_

4、添加catch this.then(undefined,rejectFun)

  1. Promise.prototype.catch=function(rejectFun){
  2.    return this.then(undefined,rejectFun)
  3. }

9、添加Promise.resolve

  1. Promise.resolve = function(value){
  2.    return new Promise((resolve,reject) => {
  3.        if(value instanceOf Promise){
  4.            value.then(v=>{
  5.               resolve(v)
  6.            },r=>{
  7.               reject(r)
  8.            })
  9.        }else{
  10.          resolve(value)
  11.        }
  12.    })
  13. }

10、添加Promise.reject

  1. Promise.reject = function(reason){
  2.    return new Promise((resolve,reject) => {
  3.        reject(reason)
  4.    })
  5. }

11、添加Promise.all

原理： 数组中多个Promise对象 ， 依次执行，全部执行成功后，resolve， 否则reject

  1. Promise.all = function(promises){
  2.    return new Promise((resolve,reject)=>{
  3.       let count, arr=[];
  4.       for(let i=0;i<promises.length;i++){
  5.          promises[i].then(v=>{
  6.               count++
  7.               arr[i] = v
  8.               if(count === promises.length){
  9.                  resolve(arr)
  10.               }
  11.          },r=>{
  12.              reject(r)
  13.          })
  14.       }
  15.    })
  16. }

12、添加Promise.race

原理：返回一个promise实例。 在多个promise对象在循环处理中，根据最先得到的结果判断promise内部的状态，结果值为promise的值

  1. Promise.race = function(promises){
  2.      return new Promise((resolve,reject)=>{
  3.       for(let i=0;i<promises.length;i++){
  4.          promises[i].then(v=>{
  5.             resolve(v)
  6.          },r=>{
  7.            reject(r)
  8.          })
  9.       }
  10.    })
  11. }

13、完整版

  1. function Promise(excetor){
  2.     let _this = this;
  3.         _this.PromiseStatus = "pedding",
  4.         _this.PromiseResult = null,
  5.         _this.callbacks = [];
  7.     function resolve(value){
  8.        if(_this.PromiseStatus!=='pedding')return
  9.        _this.PromiseStatus = 'fulfilled' 
  10.        _this.PromiseResult = value;
  11.        setTimeout(()=>{
  12.            _this.callbacks.forEach(item=>{
  13.             item.resolveFun()
  14.           })
  15.        })
  16.     }
  18.     function reject(reason){
  19.        if(_this.PromiseStatus!=='pedding')return
  20.        _this.PromiseStatus = 'rejected' 
  21.        _this.PromiseResult = reason;
  22.         setTimeout(()=>{
  23.            _this.callbacks.forEach(item=>{
  24.             item.rejectFun()
  25.           })
  26.        })
  27.     }
  29.     try{
  30.       excetor(resolve,reject)  
  31.     }catch(error){
  32.        reject(error)
  33.        throw 'promise 内部错误' + error
  34.     }
  35. }
  37. Promise.prototype.then = function(resolveFun,rejectFun){
  38.   let _this = this;
  39.   if(typeof resolveFun!=='function')resolveFun = value=>value;
  40.   if(typeof rejectFun!=='function') rejectFun = reason => { throw reason };
  41.   return new Promise((resolve,reject)=>{
  42.        function dealStatus(type){
  43.            try{
  44.              let result = type(_this.PromiseResult)
  45.              if(result instanceof Promise){
  46.                result.then(v=>{
  47.                  resolve(v)
  48.                },r=>{
  49.                  reject(r)
  50.                })
  51.              }else{
  52.                resolve(result)
  53.              }
  54.            }catch(error){
  55.              reject(error)
  56.            }
  57.         }
  58.       if(_this.PromiseStatus === 'fulfilled'){
  59.           setTimeout(()=>{
  60.              dealStatus(resolveFun)
  61.           })
  62.       }
  63.       if(_this.PromiseStatus === 'rejected'){
  64.          setTimeout(()=>{
  65.             dealStatus(rejectFun)
  66.           })
  67.       }
  68.       if(_this.PromiseStatus === 'pedding'){
  69.           this.callbacks.push({
  70.             resolveFun:function(){
  71.                 dealStatus(resolveFun)
  72.             },
  73.             rejectFun:function(){
  74.                dealStatus(rejectFun)
  75.             }
  76.           })
  77.       }
  78.   })
  79. }
  81. Promise.prototype.catch=function(rejectFun){
  82.    return this.then(undefined,rejectFun)
  83. }
  85. Promise.resolve = function(value){
  86.    return new Promise((resolve,reject) => {
  87.        if(value instanceof Promise){
  88.            value.then(v=>{
  89.               resolve(v)
  90.            },r=>{
  91.               reject(r)
  92.            })
  93.        }else{
  94.          resolve(value)
  95.        }
  96.    })
  97. }
  99. Promise.reject = function(reason){
  100.    return new Promise((resolve,reject) => {
  101.        reject(reason)
  102.    })
  103. }
  105. Promise.all = function(promises){
  106.    let count, arr=[];
  107.    return new Promise((resolve,reject)=>{
  108.       for(let i=0;i<promises.length;i++){
  109.          promises[i].then(v=>{
  110.               count++
  111.               arr[i] = v
  112.               if(count === promises.length){
  113.                  resolve(arr)
  114.               }
  115.          },r=>{
  116.              reject(r)
  117.          })
  118.       }
  119.    })
  120. }
  122. Promise.race = function(promises){
  123.      return new Promise((resolve,reject)=>{
  124.       for(let i=0;i<promises.length;i++){
  125.          promises[i].then(v=>{
  126.             resolve(v)
  127.          },r=>{
  128.            reject(r)
  129.          })
  130.       }
  131.    })
  132. }
  134. // 不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。
  135. Promise.finally = function(fn) {
  136.    return this.then((data) => {
  137.      return Promise.resole(fn()).then(() => value)
  138.    }, (err) => {
  139.      return Promise.resole(fn()).then(() => { throw err })
  140.    })
  141.  }

14、class

  1. export default class MPromise {
  2.   constructor(excetor) {
  3.       console.log('111111////')
  4.     let _this = this;
  5.     (_this.PromiseStatus = "pedding"),
  6.       (_this.PromiseResult = null),
  7.       (_this.callbacks = []);
  9.     function resolve(value) {
  10.       if (_this.PromiseStatus !== "pedding") return;
  11.       _this.PromiseStatus = "fulfilled";
  12.       _this.PromiseResult = value;
  13.       setTimeout(() => {
  14.         _this.callbacks.forEach((item) => {
  15.           item.resolveFun();
  16.         });
  17.       });
  18.     }
  20.     function reject(reason) {
  21.       if (_this.PromiseStatus !== "pedding") return;
  22.       _this.PromiseStatus = "rejected";
  23.       _this.PromiseResult = reason;
  24.       setTimeout(() => {
  25.         _this.callbacks.forEach((item) => {
  26.           item.rejectFun();
  27.         });
  28.       });
  29.     }
  31.     try {
  32.       excetor(resolve, reject);
  33.     } catch (error) {
  34.       reject(error);
  35.       throw "promise 内部错误" + error;
  36.     }
  37.   }
  39.   then(resolveFun, rejectFun) {
  40.     let _this = this;
  41.     if (typeof resolveFun !== "function") resolveFun = (value) => value;
  42.     if (typeof rejectFun !== "function")
  43.       rejectFun = (reason) => {
  44.         throw reason;
  45.       };
  46.     return new Promise((resolve, reject) => {
  47.       function dealStatus(type) {
  48.         try {
  49.           let result = type(_this.PromiseResult);
  50.           if (result instanceof Promise) {
  51.             result.then(
  52.               (v) => {
  53.                 resolve(v);
  54.               },
  55.               (r) => {
  56.                 reject(r);
  57.               }
  58.             );
  59.           } else {
  60.             resolve(result);
  61.           }
  62.         } catch (error) {
  63.           reject(error);
  64.         }
  65.       }
  66.       if (_this.PromiseStatus === "fulfilled") {
  67.         setTimeout(() => {
  68.           dealStatus(resolveFun);
  69.         });
  70.       }
  71.       if (_this.PromiseStatus === "rejected") {
  72.         setTimeout(() => {
  73.           dealStatus(rejectFun);
  74.         });
  75.       }
  76.       if (_this.PromiseStatus === "pedding") {
  77.         this.callbacks.push({
  78.           resolveFun: function () {
  79.             dealStatus(resolveFun);
  80.           },
  81.           rejectFun: function () {
  82.             dealStatus(rejectFun);
  83.           },
  84.         });
  85.       }
  86.     });
  87.   }
  89.   catch(rejectFun) {
  90.     return this.then(undefined, rejectFun);
  91.   }
  93.   static resolve(value) {
  94.     return new Promise((resolve, reject) => {
  95.       if (value instanceof Promise) {
  96.         value.then(
  97.           (v) => {
  98.             resolve(v);
  99.           },
  100.           (r) => {
  101.             reject(r);
  102.           }
  103.         );
  104.       } else {
  105.         resolve(value);
  106.       }
  107.     });
  108.   }
  110.   static reject(reason) {
  111.     return new Promise((resolve, reject) => {
  112.       reject(reason);
  113.     });
  114.   }
  116.   static all(promises) {
  117.     let count,
  118.       arr = [];
  119.     return new Promise((resolve, reject) => {
  120.       for (let i = 0; i < promises.length; i++) {
  121.         promises[i].then(
  122.           (v) => {
  123.             count++;
  124.             arr[i] = v;
  125.             if (count === promises.length) {
  126.               resolve(arr);
  127.             }
  128.           },
  129.           (r) => {
  130.             reject(r);
  131.           }
  132.         );
  133.       }
  134.     });
  135.   }
  137.   static race(promises) {
  138.     return new Promise((resolve, reject) => {
  139.       for (let i = 0; i < promises.length; i++) {
  140.         promises[i].then(
  141.           (v) => {
  142.             resolve(v);
  143.           },
  144.           (r) => {
  145.             reject(r);
  146.           }
  147.         );
  148.       }
  149.     });
  150.   }
  152.   static finally(fn) {
  153.     return this.then(
  154.       (value) => Promise.resolve(fn()).then((v) => {
  155.         console.log(v,value)
  156.           value
  157.         }),
  158.       (error) =>
  159.         Promise.resolve(fn()).then((err) => {
  160.           throw error;
  161.         })
  162.     );
  163.   }
  164. }