手写Promise

　　实现功能如下：

1. Promise构造函数
2. promise实例then方法
3. pomise实例catch方法
4. promise实例finally方法
5. Promise静态resolve方法
6. Promise静态reject方法
7. Promise静态all方法
   备注：参照渡一教育视频
   代码：

     1 const Pending = 'pending';
     2 const FullFiled = 'fulfilled';
     3 const Rejected = 'rejected';
     4 class MyPromise {
     5     #status = Pending;
     6     #value = '';
     7     #taskList = [];
     8     constructor(executor) {
     9         try {
    10             executor(this.#resolve, this.#reject);
    11         } catch (error) {
    12             this.#reject(error);
    13         }
    14 
    15     }
    16     #resolve = (data) => {
    17         this.#changeState(FullFiled, data);
    18     }
    19 
    20     #reject = (reason) => {
    21         this.#changeState(Rejected, reason);
    22     }
    23 
    24     #changeState = (status, value) => {
    25         if (status === Pending) return;
    26         this.#status = status;
    27         this.#value = value;
    28         this.#eventLoop();
    29     }
    30 
    31     // 判断then中的返回值是否复合PromiseA+规范
    32     #isPromiseA = (callBack) => {
    33         if (callBack !== null && (typeof callBack === 'object' || typeof callBack === 'array')) {
    34             return typeof callBack.then === 'function';
    35         }
    36         return false;
    37     }
    38 
    39     // 手动将promise.then中的函数放入微队列中
    40     // nodeJS环境使用process.nextTick()
    41     // 浏览器环境使用MutationObserver()
    42     #addMicroTaskList = (callBack) => {
    43         if (typeof process === 'object' && typeof process.nextTick === 'function') {
    44             process.nextTick(callBack);
    45             return;
    46         }
    47         if (typeof MutationObserver === 'function') {
    48             let m = new MutationObserver(callBack);
    49             let div = document.createElement("div");
    50             m.observe(div, {
    51                 childList: true
    52             });
    53             div.innerText = "1";
    54             return;
    55         }
    56         // 其他环境
    57         setTimeout(callBack, 0);
    58     }
    59 
    60     // promise.then中的函数需要放到微队列执行，
    61     // then中的参数有三种情况
    62     // 1. 参数不是函数，promise穿透到下一个then
    63     // 2. 参数是一个函数，
    64     // 2.1 函数的返回值不是promise，直接resolve(this.value)
    65     // 2.2 函数的返回值是promise, 调用promise.then()
    66     #handelOneTask = (callBack, resolve, reject) => {
    67         this.#addMicroTaskList(() => {
    68             if (typeof callBack === 'function') {
    69                 try {
    70                     const result = callBack(this.#value);
    71                     if (this.#isPromiseA(result)) {
    72                         result.then(resolve, reject);
    73                     } else {
    74                         resolve(result);
    75                     }
    76                 } catch (error) {
    77                     reject(error);
    78                 }
    79 
    80             } else {
    81                 // 如果then中的两个参数不是函数，则promise穿透到下一层then
    82                 if (this.#status === FullFiled) {
    83                     resolve(this.#value);
    84                 } else if (this.#status === Rejected) {
    85                     reject(this.#value);
    86                 }
    87             }
    88         });
    89     }
    90 
    91     // 每次调用then方法和promise的状态发生改变时，执行then中的回调函数
    92     #eventLoop = () => {
    93         if (this.#status === Pending) return;
    94         while (this.#taskList.length) {
    95             const { successCal, errorCal, resolve, reject } = this.#taskList.shift();
    96             switch (this.#status) {
    97                 case FullFiled:
    98                     this.#handelOneTask(successCal, resolve, reject);
    99                     break;
   100                 case Rejected:
   101                     this.#handelOneTask(errorCal, resolve, reject);
   102                     break;
   103                 default:
   104                     break;
   105             }
   106 
   107         }
   108     }
   109 
   110     // then方法接收resolve和reject的回调函数
   111     then = (successCal, errorCal) => {
   112         return new MyPromise((resolve, reject) => {
   113             this.#taskList.push({ successCal, errorCal, resolve, reject });
   114             this.#eventLoop();
   115         })
   116     }
   117 
   118     catch = (callBack) => {
   119         return this.then(undefined, callBack);
   120     }
   121 
   122     finally = (callBack) => {
   123         return this.then((data) => {
   124             callBack();
   125             return data;
   126         }, (err) => {
   127             callBack();
   128             throw err;
   129         })
   130     }
   131 
   132     static resolve = (value) => {
   133         if (value instanceof MyPromise) return value;
   134         let _resolve, _reject;
   135         const p = new MyPromise((resolve, reject) => {
   136             _resolve = resolve;
   137             _reject = reject;
   138         });
   139         if (p.#isPromiseA(value)) {
   140             value.then(_resolve, _reject)
   141         } else {
   142             _resolve(value);
   143         }
   144         return p;
   145     }
   146 
   147     static reject = (reason) => {
   148         return new MyPromise((resolve, reject) => {
   149             reject(reason);
   150         })
   151     }
   152 
   153     static all = (iterable) => {
   154         let _resolve, _reject;
   155         const p = new MyPromise((res, rej) => {
   156             _resolve = res;
   157             _reject = rej;
   158         });
   159         let successCount = 0;
   160         let count = 0;
   161         let data = [];
   162         for (const item of iterable) {
   163             const i = count;
   164             count++;
   165             MyPromise.resolve(item).then(res=>{
   166                 successCount++;
   167                 data[i] = res;
   168                 if(count === successCount) {
   169                     _resolve(data);
   170                 }
   171             }, _reject )
   172         };
   173         if (count === 0) {
   174             _resolve(data);
   175         }
   176         return p;
   177     }
   178 }
   179 
   180 const a = new MyPromise((resolve, reject) => {
   181     // resolve(123)
   182     // reject('error')
   183     // setTimeout(() => {
   184     //     resolve(123);
   185     // }, 1000);
   186     // throw 'error'
   187 });