持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

首先了解一点规范

Promise/A+ 规范

Promise规范有很多，但是ES6主要用的是Promise/A+规范，该规范内容也比较多，所以简单过一下：

Promise本身是一个状态机，每一个Promise实例只能有三个状态，pending、fulfilled、reject，状态之间的转化只能是pending->fulfilled、pending->reject，状态变化不可逆。
Promise有一个then方法，该方法可以被调用多次，并且返回一个Promise对象。
支持链式调用。
内部保存有一个value值，用来保存上次执行的结果值，如果报错，则保存的是异常信息。

具体规范可参考:

英文版：promisesaplus.com/
中文版：【翻译】Promises/A+规范

实现过程

定义基本状态

看过上文规范部分的同学们肯定知道，我们需要定义三种状态：

var pending = 0; // 进行中
var fulfilled = 1; // 成功
var reject = 2; // 失败

然后呢，进行一下简单的初始化工作：

function Promise(fn) {
  var state = pending;  // pending, fulfilled 或者 reject 的状态
  var value = null;  // 存储成功或失败的结果值
  var handlers = []; // 存储成功或失败的处理程序，通过调用`.then`或者`.done`方法

  // 成功状态变化
  function fulfill(result) {
      state = fulfilled;
      value = result;
      handlers.forEach(handle); // 处理函数，下文会提到
      handlers = null;
   }

  // 失败状态变化
  function reject(error) {
      state = reject;
      value = error;
      handlers.forEach(handle); // 处理函数，下文会提到
      handlers = null;
  }
}

只是进行基本操作，接下来是Promise的关键；

实现resolve方法

resolve方法可以接受两种参数，一种为普通的值/对象，另外一种为一个Promise对象，如果是普通的值/对象，则直接把结果传递到下一个对象；
如果是一个 Promise 对象，则必须先等待这个子任务序列完成。

function Promise(fn) {
  ...
  function resolve(result) {
      try {
        var then = getThen(result);
        if (then) {
          doResolve(then.bind(result), resolve, reject)
          return;
        }
        fulfill(result);
      } catch (e) {
        reject(e);
      }
  }
  ...
}

这里包括两个辅助函数：

// getThen 检查如果value是一个Promise对象，则返回then方法等待执行完成。
function getThen(value) {
  var t = typeof value;
  if (value && (t === 'object' || t === 'function')) {
    var then = value.then;
    if (typeof then === 'function') {
      return then;
    }
  }
  return null;
}
// 异常参数检查函数，确保onFulfilled和onRejected两个函数中只执行一个且只执行一次，但是不保证异步。
function doResolve(fn, onFulfilled, onRejected) {
  var done = false;
  try {
    fn(
      function(value) {
        if (done) return;
        done = true;
        onFulfilled(value);
      },
      function(reason) {
        if (done) return;
        done = true;
        onRejected(reason);
      }
    );
  } catch(err) {
    if (done) return;
    done = true;
    onRejected(err);
  }
}

上面已经完成了一个完整的内部状态机，但我们并没有暴露一个方法去解析或则观察 Promise 。现在让我们开始解析 Promise ：

function Promise(fn) {
  ...
  doResolve(fn, resolve, reject);
}

如你所见，我们复用了doResolve，因为对于初始化的fn也要对其进行控制。fn允许调用resolve或则reject多次，甚至抛出异常。这完全取决于我们去保证promise对象仅被resolved或则rejected一次，且状态不能随意改变。

then方法实现

在实现then方法之前，我们这里实现了一个执行方法done，该方法用来处理执行then方法的回调函数，一下为promise.done(onFullfilled, onRejected)方法的几个点。

onFulfilled 和 onRejected 两者只能有一个被执行，且执行次数为一
该方法仅能被调用一次, 一旦调用了该方法，则 promise 链式调用结束
无论是否 promise 已经被解析，都可以调用该方法

function Promise(fn) {
  ...
  // 不同状态，进行不同的处理
  function handle(handler) {
    if (state === pending) {
      handlers.push(handler);
    } else {
      if (state === fulfilled && typeof handler.onFulfilled === 'function') {
        handler.onFulfilled(value);
      }
      if (state === rejected && typeof handler.onRejected === 'function') {
        handler.onRejected(value);
      }
    }
  }

  this.done = function (onFulfilled, onRejected) {
    // 保证异步
    setTimeout(function () {
      handle({onFulfilled: onFulfilled, onRejected: onRejected});
    }, 0);
  }
}

当 Promise 被 resolved 或者 rejected 时，我们保证 handlers 将被通知。
then方法

function Promise(fn) {
  ...
  this.then = function(onFulfilled, onRejected) {
    var self = this;
    return new Promise(function (resolve, reject) {
      self.done(function (result) {
        if (typeof onFulfilled === 'function') {
          try {
            // onFulfilled方法要有返回值！
            return resolve(onFulfilled(result));
          } catch (err) {
            return reject(err);
          }
        } else {
          return resolve(result);
        }
      }, function (error) {
        if (typeof onRejected === 'function') {
          try {
            return resolve(onRejected(error));
          } catch (err) {
            return reject(err);
          }
        } else {
          return reject(error);
        }
      });
    });
  }
}

catch方法，我们直接调用then处理异常

this.catch = function(errorHandle) {
  return this.then(null, errorHandle);
}

这样，就基本实现了Promise~，最后补充一份简略版：

class Promise2 {
  #status = 'pending'
  constructor(fn) {
    this.q = []
    const resolve = (data) => {
      this.#status = 'fulfilled'
      const f1f2 = this.q.shift()
      if (!f1f2 || !f1f2[0]) return
      const x = f1f2[0].call(undefined, data)
      if (x instanceof Promise2) {
        x.then((data) => {
          resolve(data)
        }, (reason) => {
          reject(reason)
        })
      } else {
        resolve(x)
      }
    }
    const reject = (reason) => {
      this.#status = 'rejected'
      const f1f2 = this.q.shift()
      if (!f1f2 || !f1f2[1]) return
      const x = f1f2[1].call(undefined, reason)
      if (x instanceof Promise2) {
        x.then((data) => {
          resolve(data)
        }, (reason) => {
          reject(reason) 
        })
      } else {
        resolve(x)
      }
    }
    fn.call(undefined, resolve, reject)
  }
  then(f1, f2) {
    this.q.push([f1, f2])
  }
}

实现~Promise