重新手写promise，理解核心的异步链式调用原理

promise的手写版，平时业务几乎用不到，但手写会对加深对promise的理解，本文侧重理解核心的异步链式调用原理。

这边在看了最简实现 Promise，支持异步链式调用（20 行），试着再重新手写一次。

同样，这个 Promise 的实现不考虑任何异常情况，只考虑代码最简短，从而便于理解核心的异步链式调用原理。

executor 立即执行

promise 的本质是一个对象，由构造函数Promise产生实例。

产生实例的时候，需要传个executor函数，此函数直接执行。

先看看最简单的 promise，可以丢在控制台:

new Promise(() => {
  // 这句立即执行
  console.log(2);
});

仅仅实现这种程度的话，其实超简单：

function Promise(executor) {
  executor();
}

resolve 延时执行

但一般不会这么用的，executor至少也得有个resolve。

而resolve之后，会执行这个promise的所有then函数，而then这个函数，参数也是一个函数，这个函数将拿到resolve的值。

var p1 = new Promise((resolve) => {
  resolve(2);
});
p1.then((value) => {
  console.log('then1', value); // 2
});
p1.then((value) => {
  // 2
  console.log('then2', value); // 2
});

这里有个典型的发布-订阅模式，then 其实是订阅，resolve 是发布。 这种模式的通病：用数组装函数，订阅的本质就是将函数放进数组，发布的本质就是数组的函数挨个执行。

then每个实例上面都有，所以是定义在原型链上面的。

于是：

function Promise(executor) {
  // 数组收集函数
  this.cbs = [];
  // resolve执行的时候，就是数组里的函数挨个执行
  const resolve = (value) => {
    // 但是这里是空的
    console.log(this.cbs);
    this.cbs.forEach((fn) => fn(value));
  };
  executor(resolve);
}
Promise.prototype.then = function (onFulfill) {
  // 订阅就是数组里增加函数
  this.cbs.push(onFulfill);
};

但是这样是不行滴，书写顺序上resolve先执行，then后执行，所以resolve 执行的时候，cbs 是空的。

怎么样让then先执行，之后再让resolve执行呢？

书写的先后顺序肯定不能改了，那想想别的法子让执行顺序发生变化，最容易想到的就是resolve延时执行。

const resolve = (value) => {
  setTimeout(() => {
    this.cbs.forEach((fn) => fn(value));
  });
};

再运行，就没有问题了！

then 的链式调用

then函数，其实可以链式调用的。

var p1 = new Promise((resolve) => {
  resolve(2);
});
var p2 = p1.then((value) => {
  console.log('then2', value);
});
// 注意这里换成了p2，链式调用的体现
p2.then(() => {
  console.log('链式调用的then');
});

p2.then(() => {
  console.log('链式调用的then2');
});

所以then实际上返回的是一个新的promise。

因为then是一个新的promise，所以要想后面的then能执行，内部一定会有resolve

这里特别注意！then本身是个函数，这个函数的参数是另外一个函数。promise是then这个函数返回的，而和另外一个函数无关！

Promise.prototype.then = function (onFulfill) {
  this.cbs.push(onFulfill);
  // then肯定返回promise
  return new Promise((resolve) => {
    resolve();
  });
};

难点：then 的链式调用 拿到 前一个then的参数函数返回值

then函数，除了链式调用，还可以拿到前个then的参数函数返回值，注意是参数函数的返回值，而不是 then 本身的返回值，then本身肯定是返回promise的。

var p1 = new Promise((resolve) => {
  resolve(2);
});
var p2 = p1.then((value) => {
  console.log('then2', value);
  return 3;
});
// 注意这里换成了p2，链式调用的体现
p2.then((value) => {
  console.log('链式调用的then', value); // 3
});

p2.then((value) => {
  console.log('链式调用的then2', value); // 3
});
// p1有1个回调函数
console.log(p1)
// p2有2个回调函数
console.log(p2)

then能执行的前提是，对应的promise执行了resolve，这样能拿到resolve的值。

所以后面的 then 能拿到的前提是：前面的 then(返回值是promise) 将参数函数返回值resolve了。这里面略绕，得好好想想。

综上实现下：

Promise.prototype.then = function (onFulfill) {
  // then肯定返回promise
  return new Promise((resolve) => {
    // 这里面略绕，resolve需要函数的返回值，但是函数只能在cbs里执行，所以加工了onFulfill
    const fn = (value) => {
      const returnValue = onFulfill(value);
      // 为了让后面的then能执行，这里添加resolve
      resolve(returnValue);
    };
    // 这里注意！push的fn是加工后的onFulfill，fn执行之后，resolve才能执行
    this.cbs.push(fn);
  });
};

then 的参数函数返回 promise

then 的参数函数，如果返回 promise(userPromise) 的话，必须解析完 promise 之后的结果再传递到下一个 then。

var p1 = new Promise((resolve) => {
  resolve(2);
});
var p2 = p1.then((value) => {
  console.log('then2', value);
  return new Promise((resolve) => resolve(3));
});
// 注意这里换成了p2，链式调用的体现
p2.then((value) => {
  console.log('链式调用的then', value); // 3
});

p2.then((value) => {
  console.log('链式调用的then2', value); // 3
});

想拿到 promise 的解析结果，其实直接在后面调用 then 即可。

// 稍微判断下返回值
const fn = (value) => {
  const returnValue = onFulfill(value);
  // 返回值是不是promise
  if (returnValue instanceof Promise) {
    const userPromise = returnValue;
    // 是的话，将解析完之后的结果resolve
    userPromise.then(resolve);
  } else {
    resolve(returnValue);
  }
};

终版的最核心的 promise 就是

function Promise(executor) {
  // 数组收集函数
  this.cbs = [];
  // resolve执行的时候，就是数组里的函数挨个执行
  const resolve = (value) => {
    setTimeout(() => {
      this.cbs.forEach((fn) => fn(value));
    });
  };
  executor(resolve);
}
Promise.prototype.then = function (onFulfill) {
  // then肯定返回promise
  return new Promise((resolve) => {
    // 这里面略绕，resolve需要函数的返回值，但是函数只能在cbs里执行，所以加工了onFulfill
    const fn = (value) => {
      const returnValue = onFulfill(value);
      // 为了让后面的then能执行，这里添加resolve
      if (returnValue instanceof Promise) {
        const userPromise = returnValue;
        userPromise.then(resolve);
      } else {
        resolve(returnValue);
      }
    };
    // 这里注意！push的fn是加工后的onFulfill
    this.cbs.push(fn);
  });
};

总结

当然promise本身有其状态和值，还有很多边界情况，暂时没做考虑，后期再慢慢研究吧。

resolve执行其实就是then的参数函数执行。

同样，想知道promise的解析结果，也在then里才能拿到。

then本身是个函数，挂载在原型链上，里面的this是当前的promise实例，且返回新的promise实例 而其参数是个函数，这个函数是在resolve之后执行的，这个函数的返回值是由用户决定的。