（小白篇）Promise 实现原理（一）—— 基础实现

之前看过几次 promise 原理，由于水平和想法思路不够看不下去，现在再次会来踏坑，在前端的路上越走越远。

为了各位不和我一样，刚遇到promise原理时一脸懵逼，在这里再讲讲我（小白）的思路。

一、基础版本

//极简的实现
class Promise {
    callbacks = [];
    constructor(fn) {
        fn(this._resolve.bind(this));
    }
    then(onFulfilled) {
        this.callbacks.push(onFulfilled);
    }
    _resolve(value) {
        this.callbacks.forEach(fn => fn(value));
    }
}

//Promise应用
let p = new Promise(resolve => {
    setTimeout(() => {
        console.log('done');
        resolve('5秒');
    }, 5000);
}).then((tip) => {
    console.log(tip);
})

上面代码逻辑，在下是断点一步一步看出个所以然的，

首先，当代码执行到 new Promise 时，进入 Promise 构造函数，在 constructor 中调用参数 (new Promise(参数))， 其参数为 :

function(resolve) {
    setTimeout(() => {
        console.log('done');
        resolve('5秒');
    }, 5000);
}

当然这个参数为一个匿名函数（即上面这个函数），这个函数存在一个形参（resolve），到时异步执行完后要调用这个形参，所以要传入一个形参否则会报错，所以执行匿名函数的时候传入了 

fn(this._resolve.bind(this));

第二步，到了 _resolve 这个函数 是将 callback 中保存的函数都执行一遍， _resole(value)中的参数是实例resolve('5秒')中传过来的

第三步，执行 then(value),value 为

(tip) => {
    console.log(tip);
}

上面的提到的callback 是从 执行 then 是添加上去的，

第四， 当实例异步执行到 resolve 的时候，allback 中保存的函数都执行一遍

 总结下来，new Promise 会执行 promise 中的异步，.then 会把处理异步的方法放入构造函数 Promise 的callback 中，当异步执行到 resolve 时（代表异步执行完了），会去调用 callback数组中的函数。

 

当 then 使用一次的时候还是没啥问题的，但是当你链式调用的时候，则会报错了，所以改成如下，多了个 return this

class MyPromise {
      callbacks = [];
      constructor(fn) {
          fn(this._resolve.bind(this));
      }
      _resolve(value) {
            this.callbacks.forEach(fn => fn(value))
      }
      then(onFulfilled) {
            this.callbacks.push(onFulfilled);
            return this;
      }
 }  

return this 则返回一个 MyPromise，调用 .then 时 总是调用一个 MyPromise 上的 then()

 二、加入延迟机制

上面 Promise 的实现存在一个问题：如果在 then 中的方法 push 到 callback 数组 之前，resolve 就执行了，onFulfilled 就不会执行到了。比如上面的例子中我们把 setTimout 去掉：

//同步执行了resolve
let p = new Promise(resolve => {
    console.log('同步执行');
    resolve('同步执行');
}).then(tip => {
    console.log('then1', tip);
}).then(tip => {
    console.log('then2', tip);
});

执行结果显示，只有 "同步执行" 被打印了出来，后面的 "then1" 和 "then2" 均没有打印出来。再回去看下 Promise 的源码，也很好理解，resolve 执行时，callbacks 还是空数组，还没有onFulfilled 注册上来。

这显然是不允许的，Promises/A+规范明确要求回调需要通过异步方式执行，用以保证一致可靠的执行顺序。因此要加入一些处理，保证在 resolve 执行之前，then 方法已经注册完所有的回调：

//极简的实现+链式调用+延迟机制
class Promise {
    callbacks = [];
    constructor(fn) {
        fn(this._resolve.bind(this));
    }
    then(onFulfilled) {
        this.callbacks.push(onFulfilled);
        return this;
    }
    _resolve(value) {
        setTimeout(() => {//看这里
            this.callbacks.forEach(fn => fn(value));
        });
    }
}

在 resolve 中增加定时器，通过 setTimeout 机制，将 resolve 中执行回调的逻辑放置到JS任务队列末尾，以保证在 resolve 执行时，then方法的 onFulfilled 已经注册完成。

（resolve 加 setTimeout 防止 Promise 中参数（函数）是同步，直接就调用 callback, 但是 .then 还没执行，还没把 then 中的方法注册到 callback, 所以要给 resolve 一个异步）

 

但是这样依然存在问题，如果 .then 也是一个异步的话，而且在 resolve 异步后执行的话，此时这个 .then 便失效了。

在 resolve 执行后，再通过 then 注册上来的 onFulfilled 都没有机会执行了。如下所示，我们加了延迟后，then1 和 then2 可以打印出来了，但下例中的 then3 依然打印不出来。所以我们需要增加状态，并且保存 resolve 的值。

let p = new Promise(resolve => {
    console.log('同步执行');
    resolve('同步执行');
}).then(tip => {
    console.log('then1', tip);
}).then(tip => {
    console.log('then2', tip);
});

setTimeout(() => {
    p.then(tip => {
        console.log('then3', tip);
    })
});

 三、增加状态

为了解决上一节抛出的问题，我们必须加入状态机制，也就是大家熟知的 pending、fulfilled、rejected。

Promises/A+ 规范中明确规定了，pending 可以转化为 fulfilled 或 rejected 并且只能转化一次，也就是说如果 pending 转化到 fulfilled 状态，那么就不能再转化到 rejected。并且 fulfilled 和 rejected 状态只能由 pending 转化而来，两者之间不能互相转换。

 

 增加状态后的实现是这样的

//极简的实现+链式调用+延迟机制+状态
class Promise {
    callbacks = [];
    state = 'pending';//增加状态
    value = null;//保存结果
    constructor(fn) {
        fn(this._resolve.bind(this));
    }
    then(onFulfilled) {
        if (this.state === 'pending') {//在resolve之前，跟之前逻辑一样，添加到callbacks中
            this.callbacks.push(onFulfilled);
        } else {//在resolve之后，直接执行回调，返回结果了
            onFulfilled(this.value);
        }
        return this;
    }
    _resolve(value) {
        this.state = 'fulfilled';//改变状态
        this.value = value;//保存结果
        this.callbacks.forEach(fn => fn(value));
    }
}

当增加完状态之后，原先的_resolve中的定时器可以去掉了。当reolve同步执行时，虽然callbacks为空，回调函数还没有注册上来，但没有关系，因为后面注册上来时，判断状态为fulfilled，会立即执行回调。