前端面试必备，手写一个Promise

Promise 作为异步流程控制的一种新的模式，可以让我们避免旧版本的回调地狱模式，作为面试出现频率最高的面试题，我们很有必要懂得 Promise 其中的原理和实现的流程。

Promise 基本特性

我们先来了解下 Promise 的基本特性

• Promise 有三种状态：pending、fulfilled、rejected
• Promise 对象接收一个回调函数作为参数，该回调函数接收两个参数，resolve 和 reject；另外 resolve 的参数除了正常值以外，还可以是一个 Promise 对象的实例。reject 的参数通常是一个 Error 对象的实例。
• then 方法返回一个新的 Promise 实例
• catch 方法返回一个新的 Promise 实例
• finally 方法不管 Promise 状态如何都会执行，该方法的回调函数不接收任何参数
• Promise.all() 方法接收一个 promise 的 iterable 类型（注：Array，Map，Set 都属于 ES6 的 iterable 类型）的输入，并且只返回一个Promise实例。
  • 当输入的所有 promise 数组都成功时，resolve 所有结果按顺序拼接的数组
  • 当输入的所有 promise 有一个 promise 失败，就全部失败
• Promise.resolve(value) 方法返回一个以给定值解析后的 Promise  对象。如果这个值是一个 promise ，那么将返回这个 promise ；如果这个值是 thenable（即带有"then" 方法），返回的 promise 会“跟随”这个 thenable 的对象，采用它的最终状态；否则返回的 promise 将以此值完成。此函数将类 promise 对象的多层嵌套展平。
• Promise.reject() 返回一个新的 Promise 对象，状态为 rejected，传入的参数都将作为 reject() 的参数

Promise 基础实现

function myPromise(constructor) {
  let self = this;
  self.status = "pending"; // 定义状态改变前的初始状态
  self.value = undefined; // 定义状态为resolved的时候的状态
  self.reason = undefined; // 定义状态为rejected的时候的状态
  function resolve(value) {
    // 两个==="pending"，保证了了状态的改变是不不可逆的
    if (self.status === "pending") {
      self.value = value;
      self.status = "resolved";
    }
  }
  function reject(reason) {
    // 两个==="pending"，保证了了状态的改变是不不可逆的
    if (self.status === "pending") {
      self.reason = reason;
      self.status = "rejected";
    }
  }
  // 捕获构造异常
  try {
    constructor(resolve, reject);
  } catch (e) {
    reject(e);
  }
}
myPromise.prototype.then = function (onFullfilled, onRejected) {
  let self = this;
  switch (self.status) {
    case "resolved":
      onFullfilled(self.value);
      break;
    case "rejected":
      onRejected(self.reason);
      break;
    default:
  }
};

//  测试
var p = new myPromise(function (resolve, reject) {
  resolve(1);
});
p.then(function (x) {
  console.log(x);
});

Promise 完整实现

// promis可以解决 回调地狱  错误处理  并发的问题
// 1）Promise(承诺)类， promise有三个状态  等待态(pending)   成功态(fulfilled)  失败态(rejected)
// 2) executor会立即执行(同步的) resolve reject也是函数
// 3) 每一个promise都有一个then方法 then方法上传递两个函数  第一个是成功的  第二个是失败的
// 4) 一旦调用成功就不再调用失败  一旦调用失败就不会在执行成功
function Promise(executor) {
  //初始为等待态
  this.status = "pending";
  //成功的值
  this.value = undefined;
  //失败的原因
  this.reason = undefined;
  //定义两个队列 存放当前因为异步未执行的then上的方法
  this.onfulfilledCallbacks = [];
  this.onrejectedCallbacks = [];
  //保证this指向
  let that = this;

  function resolve(value) {
    //判断当前是否为等待态  以保证只能只能从成功或者失败选择一者
    if (that.status === "pending") {
      //将成功的值传入
      that.value = value;
      //改变当前状态
      that.status = "fulfilled";
      //异步状态改变时 让队列中的方法全部执行
      that.onfulfilledCallbacks.forEach((fn) => fn());
    }
  }
  function reject(reason) {
    if (that.status === "pending") {
      that.reason = reason;
      that.status = "rejected";
      that.onrejectedCallbacks.forEach((fn) => fn());
    }
  }

  try {
    //执行器会传入两个函数并立即执行   同步
    executor(resolve, reject);
  } catch (e) {
    //如果报错  调用then上失败的方法
    reject(e);
  }
}
//promise2是当前then方法返回的promise实例
//x是当前then中成功或失败的结果
//这个方法要兼容别人的方法 所以要写的严谨些
function resolvePromise(promise2, x, resolve, reject) {
  //对x进行判断  如果x是普通值 直接resolve
  //若果x是一个promise 则采用x对状态
  if (x === promise2) {
    return reject(new TypeError("循环引用"));
  }
  if (x !== null && (typeof x === "object" || typeof x === "function")) {
    let called;
    try {
      //因为可能混混着别人对逻辑  x.then的时候取值出错
      let then = x.then;
      if (typeof then === "function") {
        //此时就认为是一个promise
        then.call(
          x,
          (y) => {
            if (called) return; //防止调用失败后又调用成功
            called = true;
            resolvePromise(promise2, y, resolve, reject); //返回的是一个promise，resolve的结果还是一个promise 递归解析直到y是一个常量
          },
          (r) => {
            if (called) return; //防止调用成功后又调用失败
            called = true;
            reject(r);
          }
        );
      } else {
        //{then:{}}
        resolve(x);
      }
    } catch (e) {
      //防止别人是通过Object defineproprety定义的
      if (called) return; //防止出错后继续调用
      called = true;
      reject(e);
    }
  } else {
    resolve(x);
  }
}

//每个promise实例上都有一个then方法 需要传入两个函数 onfulfilled 和 onrejected
Promise.prototype.then = function (onfulfilled, onrejected) {
  //穿透处理 值的可选
  onfulfilled = typeof onfulfilled == "function" ? onfulfilled : (val) => val;
  onrejected =
    typeof onrejected == "function"
      ? onrejected
      : (err) => {
          throw err;
        };
  //保存this指向
  let that = this;
  //创建并并返回一个新的promise实例 来实现链式调用
  let promise2 = new Promise(function (resolve, reject) {
    //判断当前状态
    if (that.status === "fulfilled") {
      //定时器是为了让promise2产生
      setTimeout(() => {
        try {
          //调用函数并将值传入
          let x = onfulfilled(that.value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });
    }
    if (that.status === "rejected") {
      setTimeout(() => {
        try {
          let x = onrejected(that.reason);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });
    }
    //////////////////以上是同步思路///////////////////
    //当异步时  因为延迟运行 then先执行 此时当的状态为等待态  此时先将两种方法存起来 等待状态改变后一并执行
    if (that.status === "pending") {
      //发布订阅思想
      that.onfulfilledCallbacks.push(function () {
        setTimeout(() => {
          try {
            let x = onfulfilled(that.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        });
      });
      that.onrejectedCallbacks.push(function () {
        setTimeout(() => {
          try {
            let x = onrejected(that.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        });
      });
    }
  });

  return promise2;
};

//catch是then的简写
Promise.prototype.catch = function (errCallback) {
  return this.then(null, errCallback);
};

Promise.reject = function (reason) {
  return new Promise((resolve, reject) => {
    reject(reason);
  });
};

Promise.resolve = function (value) {
  return new Promise((resolve, reject) => {
    resolve(value);
  });
};

Promise.prototype.finally = function (callback) {
  return this.then(
    function (data) {
      return new Promise.resolve(callback()).then(() => data);
    },
    function (reason) {
      return new Promise.resolve(callback()).then(() => {
        throw reason;
      });
    }
  );
};

//测试 promises-aplus-tests安装：npm install -g promises-aplus-tests
//进入promise.js所在的目录运行：promises-aplus-tests  promise.js(文件名)
Promise.deferred = function () {
  let dfd = {};
  dfd.promise = new Promise((resolve, reject) => {
    dfd.resolve = resolve;
    dfd.reject = reject;
  });
  return dfd;
};

module.exports = Promise;