大体思路：
resolve方法实现异步的回调并得到结果通知，然后再通知onFulfilled
reject方法实现异步的回调并得到错误反馈，然后再通知onRejected

then方法实现对onFulfilled和onRejected的二次封装后，加载到回调队列_resolveQueue/_rejectQueue，等候通知，并且返回新的pomise实现链式调用

版本一

这个版本有个问题：当传给reject回调的参数是 promise 对象时，没做处理。

  1. // Promise/A+ 规范规定的三种状态
  2. const STATUS = {
  3.   PENDING: 'pending',
  4.   FULFILLED: 'fulfilled',
  5.   REJECTED: 'rejected'
  6. }
  8. class MyPromise {
  9.   // 构造函数接收一个执行回调
  10.   constructor(executor) {
  11.     this._status = STATUS.PENDING // Promise初始状态
  12.     this._value = undefined // then回调的值
  13.     this._resolveQueue = [] // resolve时触发的成功队列
  14.     this._rejectQueue = [] // reject时触发的失败队列
  16.     // 使用箭头函数固定this（resolve函数在executor中触发，不然找不到this）
  17.     const resolve = value => {
  18.       const run = () => {
  19.         // Promise/A+ 规范规定的Promise状态只能从pending触发，变成fulfilled
  20.         if (this._status === STATUS.PENDING) {
  21.           this._status = STATUS.FULFILLED // 更改状态
  22.           this._value = value // 储存当前值，用于then回调
  24.           // 执行resolve回调
  25.           while (this._resolveQueue.length) {
  26.             const callback = this._resolveQueue.shift()
  27.             callback(value)
  28.           }
  29.         }
  30.       }
  31.       //把resolve执行回调的操作封装成一个函数,放进setTimeout里,以实现promise异步调用的特性（规范上是微任务，这里是宏任务）
  32.       setTimeout(run)
  33.     }
  35.     // 同 resolve
  36.     const reject = value => {
  37.       const run = () => {
  38.         if (this._status === STATUS.PENDING) {
  39.           this._status = STATUS.REJECTED
  40.           this._value = value
  42.           while (this._rejectQueue.length) {
  43.             const callback = this._rejectQueue.shift()
  44.             callback(value)
  45.           }
  46.         }
  47.       }
  48.       setTimeout(run)
  49.     }
  51.     // new Promise()时立即执行executor,并传入resolve和reject
  52.     executor(resolve, reject)
  53.   }
  55.   // then方法,接收一个成功的回调和一个失败的回调
  56.   then(onFulfilled, onRejected) {
  57.     // 根据规范，如果then的参数不是function，则忽略它, 让值继续往下传递，链式调用继续往下执行
  58.     typeof onFulfilled !== 'function' ? onFulfilled = value => value : null
  59.     typeof onRejected !== 'function' ? onRejected = error => error : null
  61.     // then 返回一个新的promise
  62.     return new MyPromise((resolve, reject) => {
  63.       const resolveFn = value => {
  64.         try {
  65.           const x = onFulfilled(value)
  66.           // 分类讨论返回值,如果是Promise,那么等待Promise状态变更,否则直接resolve
  67.           x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
  68.         } catch (error) {
  69.           reject(error)
  70.         }
  71.       }
  73.       const rejectFn = error => {
  74.         try {
  75.           const x = onRejected(error)
  76.           x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
  77.         } catch (error) {
  78.           reject(error)
  79.         }
  80.       }
  82.       switch (this._status) {
  83.         case STATUS.PENDING:
  84.           this._resolveQueue.push(resolveFn)
  85.           this._rejectQueue.push(rejectFn)
  86.           break;
  87.         case STATUS.FULFILLED:
  88.           resolveFn(this._value)
  89.           break;
  90.         case STATUS.REJECTED:
  91.           rejectFn(this._value)
  92.           break;
  93.       }
  94.     })
  95.   }
  97.   catch(rejectFn) {
  98.     return this.then(undefined, rejectFn)
  99.   }
  101.   finally(callback) {
  102.     return this.then(value => MyPromise.resolve(callback()).then(() => value), error => {
  103.       MyPromise.resolve(callback()).then(() => error)
  104.     })
  105.   }
  107.   // 静态resolve方法
  108.   static resolve(value) {
  109.     return value instanceof MyPromise ? value : new MyPromise(resolve => resolve(value))
  110.   }
  112.   // 静态reject方法
  113.   static reject(error) {
  114.     return new MyPromise((resolve, reject) => reject(error))
  115.   }
  117.   // 静态all方法
  118.   static all(promiseArr) {
  119.     let count = 0
  120.     let result = []
  121.     return new MyPromise((resolve, reject) => {
  122.       if (!promiseArr.length) {
  123.         return resolve(result)
  124.       }
  125.       promiseArr.forEach((p, i) => {
  126.         MyPromise.resolve(p).then(value => {
  127.           count++
  128.           result[i] = value
  129.           if (count === promiseArr.length) {
  130.             resolve(result)
  131.           }
  132.         }, error => {
  133.           reject(error)
  134.         })
  135.       })
  136.     })
  137.   }
  139.   // 静态race方法
  140.   static race(promiseArr) {
  141.     return new MyPromise((resolve, reject) => {
  142.       promiseArr.forEach(p => {
  143.         MyPromise.resolve(p).then(value => {
  144.           resolve(value)
  145.         }, error => {
  146.           reject(error)
  147.         })
  148.       })
  149.     })
  150.   }
  151. }

版本二

  1.   // 判断变量否为function
  2.   const isFunction = variable => typeof variable === 'function'
  3.   // 定义Promise的三种状态常量
  4.   const PENDING = 'PENDING'
  5.   const FULFILLED = 'FULFILLED'
  6.   const REJECTED = 'REJECTED'
  8.   class MyPromise {
  9.     constructor (handle) {
  10.       if (!isFunction(handle)) {
  11.         throw new Error('MyPromise must accept a function as a parameter')
  12.       }
  13.       // 添加状态
  14.       this._status = PENDING
  15.       // 添加状态
  16.       this._value = undefined
  17.       // 添加成功回调函数队列
  18.       this._fulfilledQueues = []
  19.       // 添加失败回调函数队列
  20.       this._rejectedQueues = []
  21.       // 执行handle
  22.       try {
  23.         handle(this._resolve.bind(this), this._reject.bind(this)) 
  24.       } catch (err) {
  25.         this._reject(err)
  26.       }
  27.     }
  28.     // 添加resovle时执行的函数
  29.     _resolve (val) {
  30.       const run = () => {
  31.         if (this._status !== PENDING) return
  32.         // 依次执行成功队列中的函数，并清空队列
  33.         const runFulfilled = (value) => {
  34.           let cb;
  35.           while (cb = this._fulfilledQueues.shift()) {
  36.             cb(value)
  37.           }
  38.         }
  39.         // 依次执行失败队列中的函数，并清空队列
  40.         const runRejected = (error) => {
  41.           let cb;
  42.           while (cb = this._rejectedQueues.shift()) {
  43.             cb(error)
  44.           }
  45.         }
  46.         /* 如果resolve的参数为Promise对象，则必须等待该Promise对象状态改变后,
  47.           当前Promsie的状态才会改变，且状态取决于参数Promsie对象的状态
  48.         */
  49.         if (val instanceof MyPromise) {
  50.           val.then(value => {
  51.             this._value = value
  52.             this._status = FULFILLED
  53.             runFulfilled(value)
  54.           }, err => {
  55.             this._value = err
  56.             this._status = REJECTED
  57.             runRejected(err)
  58.           })
  59.         } else {
  60.           this._value = val
  61.           this._status = FULFILLED
  62.           runFulfilled(val)
  63.         }
  64.       }
  65.       // 为了支持同步的Promise，这里采用异步调用
  66.       setTimeout(run, 0)
  67.     }
  68.     // 添加reject时执行的函数
  69.     _reject (err) { 
  70.       if (this._status !== PENDING) return
  71.       // 依次执行失败队列中的函数，并清空队列
  72.       const run = () => {
  73.         this._status = REJECTED
  74.         this._value = err
  75.         let cb;
  76.         while (cb = this._rejectedQueues.shift()) {
  77.           cb(err)
  78.         }
  79.       }
  80.       // 为了支持同步的Promise，这里采用异步调用
  81.       setTimeout(run, 0)
  82.     }
  83.     // 添加then方法
  84.     then (onFulfilled, onRejected) {
  85.       const { _value, _status } = this
  86.       // 返回一个新的Promise对象
  87.       return new MyPromise((onFulfilledNext, onRejectedNext) => {
  88.         // 封装一个成功时执行的函数
  89.         let fulfilled = value => {
  90.           try {
  91.             if (!isFunction(onFulfilled)) {
  92.               onFulfilledNext(value)
  93.             } else {
  94.               let res =  onFulfilled(value);
  95.               if (res instanceof MyPromise) {
  96.                 // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
  97.                 res.then(onFulfilledNext, onRejectedNext)
  98.               } else {
  99.                 //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
  100.                 onFulfilledNext(res)
  101.               }
  102.             }
  103.           } catch (err) {
  104.             // 如果函数执行出错，新的Promise对象的状态为失败
  105.             onRejectedNext(err)
  106.           }
  107.         }
  108.         // 封装一个失败时执行的函数
  109.         let rejected = error => {
  110.           try {
  111.             if (!isFunction(onRejected)) {
  112.               onRejectedNext(error)
  113.             } else {
  114.                 let res = onRejected(error);
  115.                 if (res instanceof MyPromise) {
  116.                   // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
  117.                   res.then(onFulfilledNext, onRejectedNext)
  118.                 } else {
  119.                   //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
  120.                   onFulfilledNext(res)
  121.                 }
  122.             }
  123.           } catch (err) {
  124.             // 如果函数执行出错，新的Promise对象的状态为失败
  125.             onRejectedNext(err)
  126.           }
  127.         }
  128.         switch (_status) {
  129.           // 当状态为pending时，将then方法回调函数加入执行队列等待执行
  130.           case PENDING:
  131.             this._fulfilledQueues.push(fulfilled)
  132.             this._rejectedQueues.push(rejected)
  133.             break
  134.           // 当状态已经改变时，立即执行对应的回调函数
  135.           case FULFILLED:
  136.             fulfilled(_value)
  137.             break
  138.           case REJECTED:
  139.             rejected(_value)
  140.             break
  141.         }
  142.       })
  143.     }
  144.     // 添加catch方法
  145.     catch (onRejected) {
  146.       return this.then(undefined, onRejected)
  147.     }
  148.     // 添加静态resolve方法
  149.     static resolve (value) {
  150.       // 如果参数是MyPromise实例，直接返回这个实例
  151.       if (value instanceof MyPromise) return value
  152.       return new MyPromise(resolve => resolve(value))
  153.     }
  154.     // 添加静态reject方法
  155.     static reject (value) {
  156.       return new MyPromise((resolve ,reject) => reject(value))
  157.     }
  158.     // 添加静态all方法
  159.     static all (list) {
  160.       return new MyPromise((resolve, reject) => {
  161.         /**
  162.          * 返回值的集合
  163.          */
  164.         let values = []
  165.         let count = 0
  166.         for (let [i, p] of list.entries()) {
  167.           // 数组参数如果不是MyPromise实例，先调用MyPromise.resolve
  168.           this.resolve(p).then(res => {
  169.             values[i] = res
  170.             count++
  171.             // 所有状态都变成fulfilled时返回的MyPromise状态就变成fulfilled
  172.             if (count === list.length) resolve(values)
  173.           }, err => {
  174.             // 有一个被rejected时返回的MyPromise状态就变成rejected
  175.             reject(err)
  176.           })
  177.         }
  178.       })
  179.     }
  180.     // 添加静态race方法
  181.     static race (list) {
  182.       return new MyPromise((resolve, reject) => {
  183.         for (let p of list) {
  184.           // 只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变
  185.           this.resolve(p).then(res => {
  186.             resolve(res)
  187.           }, err => {
  188.             reject(err)
  189.           })
  190.         }
  191.       })
  192.     }
  193.     finally (cb) {
  194.       return this.then(
  195.         value  => MyPromise.resolve(cb()).then(() => value),
  196.         reason => MyPromise.resolve(cb()).then(() => { throw reason })
  197.       );
  198.     }
  199.   }

版本三

const isFunc = obj => Object.prototype.toString.call(obj) === '[object Function]';
const isObj = obj => Object.prototype.toString.call(obj) === '[object Object]';
// 等待态 规范 2.1.1
const PENDING = 'pending';
// 执行态 规范 2.1.2
const FULFILLED = 'fulfilled';
// 拒绝态 规范 2.1.3
const REJECTED = 'rejected';

class MyPromise {
  constructor(fn) {
    this.status = PENDING;
    this.value = undefined;
    this.filfulledQueues = [];
    this.rejectedQueues = [];
    try {
      fn(this._resolve.bind(this), this._reject.bind(this));
    } catch (err) {
      this._reject(err);
    }
  }
  //传入 promise 的第一个参数 resolve
  _resolve(val) {
    if (val instanceof MyPromise) {
      val.then(this._resolve, this._reject);
    } else if (isObj(val) || isFunc(val)) {
      try {
        if (isFunc(val.then)) {
          val.then(this._resolve, this._reject);
        }
      } catch (e) {
        this._reject(e);
      }
    }
    this._execCallback(FULFILLED, this.filfulledQueues, val);
  }
  //传入 promise 的第二个参数 reject
  _reject(val) {
    this._execCallback(REJECTED, this.rejectedQueues, val);
  }
  _execCallback(status, list, val) {
    //规范 2.2.4 onFulfilled 和 onRejected 只有在执行环境堆栈仅包含平台代码时才可被调用，且被作为函数调用（即没有 this 值）
    setTimeout(() => {
      if (this.status !== PENDING) {
        return;
      }
      this.status = status;
      this.value = val;
      let cb;
      //规范 2.2.6
      while ((cb = list.shift())) {
        cb(val);
      }
    });
  }
  //规范 2.3 Promise 解决过程 [[Resolve]](promise, x)
  _resolvePromise(newPromise, x, resolve, reject) {
    if (newPromise === x) {
      //规范 2.3.1
      return reject(new TypeError('循环引用'));
    }
    if (x instanceof MyPromise) {
      //规范 2.3.2
      x.then(resolve, reject);
    } else if (isObj(x) || isFunc(x)) {
      //规范 2.3.3
      try {
        //规范 2.3.3.3
        if (isFunc(x.then)) {
          x.then(resolve, reject);
        } else {
          //规范 2.3.3.4
          resolve(x);
        }
      } catch (e) {
        //规范 2.3.3.3.4
        reject(e);
      }
    } else {
      //规范 2.3.4
      resolve(x);
    }
  }
  //规范 2.2
  then(onFulfilled, onRejected) {
    let newPromise;
    //规范 2.2.1，2.2.7.3
    onFulfilled = isFunc(onFulfilled) ? onFulfilled : val => val;
    //规范 2.2.1，2.2.7.4
    onRejected = isFunc(onRejected)
      ? onRejected
      : err => {
          throw err;
        };
    //规范 2.2.7 then 方法必须返回一个 promise 对象：promise2 = promise1.then(onFulfilled, onRejected);
    return (newPromise = new MyPromise((onFulfilledNext, onRejectedNext) => {
      // onFulfilledNext, onRejectedNext 即该 then 的下一个 then 里传的 resolve 和 reject
      if (this.status === FULFILLED || this.status === REJECTED) {
        //规范 2.2.4 onFulfilled 和 onRejected 只有在执行环境堆栈仅包含平台代码时才可被调用
        setTimeout(() => {
          // 规范 2.2.7.1 不论 promise1 被 reject 还是被 resolve 时 promise2 都会被 resolve（走_resolvePromise方法），只有出现异常时才会被 rejected。
          try {
            //规范 2.2.2，2.2.3，2.2.5
            const x = this.status === FULFILLED ? onFulfilled(this.value) : onRejected(this.value);
            this._resolvePromise(newPromise, x, onFulfilledNext, onRejectedNext);
          } catch (e) {
            //规范 2.2.7.2  这里如果x为捕获的err（即 onRejected 不是函数 2.2.7.4）也会进入
            onRejectedNext(e);
          }
        });
      } else if (this.status === PENDING) {
        //规范 2.2.6.1
        this.filfulledQueues.push(() => {
          try {
            //规范 2.2.2，2.2.5
            const x = onFulfilled(this.value);
            this._resolvePromise(newPromise, x, onFulfilledNext, onRejectedNext);
          } catch (e) {
            //规范 2.2.7.2
            onRejectedNext(e);
          }
        });
        //规范 2.2.6.2
        this.rejectedQueues.push(() => {
          try {
            //规范 2.2.3，2.2.5
            const x = onRejected(this.value);
            this._resolvePromise(newPromise, x, onFulfilledNext, onRejectedNext);
          } catch (e) {
            //规范 2.2.7.2
            onRejectedNext(e);
          }
        });
      }
    }));
  }
  //catch 方法
  catch(onRejected) {
    return this.then(null, onRejected);
  }
  //finally 方法
  finally(cb) {
    return this.then(
      val => {
        MyPromise.resolve(cb()).then(() => val);
      },
      err => {
        MyPromise.resolve(cb()).then(() => {
          throw err;
        });
      }
    );
  }
  //resolve 方法
  static resolve(params) {
    return new MyPromise(resolve => {
      resolve(params);
    });
  }
  //reject 方法
  static reject(err) {
    return new MyPromise((resolve, reject) => {
      reject(err);
    });
  }
  //all 方法
  static all(params) {
    let count = 0;
    let valueList = [];
    const promises = Array.from(params);
    return new MyPromise((resolve, reject) => {
      promises.forEach((item, index) => {
        if (!item instanceof MyPromise) {
          item = MyPromise.resolve(item);
        }
        item.then(r => {
          valueList[index] = r;
          if (promises.length === ++count) {
            resolve(valueList);
          }
        }, reject);
      });
    });
  }
  //race 方法
  static race(params) {
    const promises = Array.from(params);
    return new MyPromise((resolve, reject) => {
      promises.forEach(item => {
        if (!item instanceof MyPromise) {
          item = MyPromise.resolve(item);
        }
        item.then(resolve, reject);
      });
    });
  }
}

参考

Promise系列2——Promises_A+ 规范解读
https://promisesaplus.com/
看了就会，手写Promise原理，最通俗易懂的版本！！！
promise规范实现
Promise知识汇总和面试情况