作为一个只会写回调函数的小白，虽然每天都在调用接口，但是对Promise很陌生，毕竟用的都是大佬封装好的，是时候解决这只拦路虎了！

解决Promise的第一步，是了解Promise。

定义

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

Promise A+规范

术语

1、promise，是一个有then方法的对象或者是函数，行为遵循promise A+规范

2、thenable，是一个有then方法的函数或对象

3、value，promise状态成功时的值，resolve的参数，成功传递的参数

4、reason，promise状态失败时的值，reject的参数，表示拒绝的原因

Promise的特性

Promise对象有两个特点。

1、Promise对象的状态不受外界影响。

共有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

2、一旦状态改变，就不会再变。

pending -> resolve(value) -> fulfilled，必须有一个value值，不传就是undefined
pending -> reject(value) -> rejected，必须有一个reason值，不传就是undefined

Promise对象的缺点

1、无法取消Promise，一旦新建就会立即执行，无法中途取消。

2、如果不设置回调函数，Promise会在内部抛出错误，不会反应到外部。

3、当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

Promise.prototype.then()

Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数，它们都是可选的

promise.then(onFulfilled,onRejected);

参数要求

onFulfilled & onRejected

都必须是一个函数类型
如果不是函数，应该定义一个新的回调方法，且传递上一个promise的value/reason
只能被调用一次
执行环境应该是微任务

queueMicrotask(()=>{
    //执行微任务
})

返回值

then返回值是一个新的promise
then可以被调用多次，按调用的顺序执行回调函数。
采用链式的then，可以指定一组按照次序调用的回调函数。这时后一个回调函数，就会等待前Promise对象的状态发生变化，才会被调用。

ResolvePromise

这个在我个人理解来看，就是用来将then方法中返回的新promise做状态处理的。

//传参：返回的新promise，then中回调函数执行的结果x，resolve和reject
resolvePromise(promise2, x, resolve, reject)

如果promise2和x相等，那么调用reject并且抛出一个错误，因为这会引起死循环
如果x是一个promsie
1. pending状态，那么promise2必须要在pending,直到 x 变成 fulfilled or rejected.
2. fulfilled, fulfill promise with the same value.
3. rejected, reject promise with the same reason.
如果x是object或者是function, 获取一下x.then
1. 如果出错，reject promise with e as the reason.
2. 如果x.then是一个函数，then.call(x, resolvePromiseFn, rejectPromise)
  
  2.1 resolvePromiseFn的入参是 y, 执行 resolvePromise(promise2, y, resolve, reject)
  
  2.2 rejectPromise的入参是 r, reject promise with r
  
  2.3 如果 resolvePromise和rejectPromise都调用了，那么第一个调用优先，后面的调用忽略。
  
  2.4 如果调用then抛出异常,如果 resolvePromise 或 rejectPromise 已经被调用，那么忽略则，reject promise with e as the reason
  
  2.5 如果 then 不是一个function. fulfill promise with x.

代码实现

定义一个MPromise类，并创建一个构造函数.

class MPromise {
    constructor() {

    }
}

定义MPromise的三种状态类型

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

在构造函数中设置初始状态

class MPromise {
    constructor() {
        // 初始状态为pending
        this.status = PENDING;
        this.value = null;
        this.reason = null;
    }
}

resolve 和 reject 方法，并给status附上初始值

class MPromise {
    constructor() {
        // 初始状态为pending
        this.status = PENDING;
        this.value = null;
        this.reason = null;
    }

    resolve(value) {
        if (this.status === PENDING) {
            this.value = value;
            this.status = FULFILLED;
        }
    }

    reject(reason) {
        if (this.status === PENDING) {
            this.reason = reason;
            this.status = REJECTED;
        }
    }
}

给构造函数加上参数

该参数是一个函数, 函数接收resolve和reject两个参数.
注意在初始化promise的时候, 就要执行这个函数, 并且有任何报错都要通过reject抛出去

class MPromise {
    constructor(fn) {
        // 初始状态为pending
        this.status = PENDING;
        this.value = null;
        this.reason = null;
        try {
            //这里class内部是严格模式，所以 this 实际指向的是undefined，所以要显式绑定this
            fn(this.resolve.bind(this), this.reject.bind(this));
        } catch (e) {
            this.reject(e);
        }
    }

    resolve(value) {
        if (this.status === PENDING) {
            this.value = value;
            this.status = FULFILLED;
        }
    }

    reject(reason) {
        if (this.status === PENDING) {
            this.reason = reason;
            this.status = REJECTED;
        }
    }
}

实现then方法

then接收两个参数, onFulfilled 和 onRejected
检查并处理参数, 之前提到的如果不是function, 就忽略. 这个忽略指的是原样返回value或者reason.

then的返回值是一个promise.

then(onFulfilled, onRejected) {
    const realOnFulfilled = this.isFunction(onFulfilled) ? onFulfilled : (value) => {
        return value
    }
    const realOnRejected = this.isFunction(onRejected) ? onRejected : (reason) => {
        throw reason;
    };
    const promise2 = new MPromise((resolve, reject) => {
        // 判断当前实例的状态（注意不是promise2）
        switch (this.status) {
            case FULFILLED: {
                realOnFulfilled()
                break;
            }
            case REJECTED: {
                realOnRejected()
                break;
            }
        }
    })
    return promise2
}
isFunction(param) {
    return typeof param === 'function';
}

此时，MPromise已经可以完成同步的状态改变、并做相关操作的功能了，但是当then函数被调用时,这个实例的status很有可能还是pending的（也就是异步的情况还未考虑）. 所以需要一个状态的监听机制, 当状态变成fulfilled或者rejected后, 再去执行callback.

    ```
    // 新建两个数组, 来分别存储成功和失败的回调
    FULFILLED_CALLBACK_LIST = [];
    REJECTED_CALLBACK_LIST = [];
    then(onFulfilled, onRejected) {
    const realOnFulfilled = this.isFunction(onFulfilled) ? onFulfilled : (value) => {
        return value
    }
    const realOnRejected = this.isFunction(onRejected) ? onRejected : (reason) => {
        throw reason;
    };
    const promise2 = new MPromise((resolve, reject) => {
        switch (this.status) {
            case FULFILLED: {
                realOnFulfilled()
                break;
            }
            case REJECTED: {
                realOnRejected()
                break;
            }
            case PENDING: {
                //如果还是pending就存入数组
                this.FULFILLED_CALLBACK_LIST.push(realOnFulfilled)
                this.REJECTED_CALLBACK_LIST.push(realOnRejected)
            }
        }
    })
    return promise2
    ```

在status发生变化的时候, 就执行数组中储存的所有回调。

    ```
    _status = PENDING;// 需要定义中间变量，否则会造成死循环
    
    get status() {
        return this._status;
    }
    
    set status(newStatus) {
        this._status = newStatus;
        // 调用回调函数
        switch (newStatus) {
            case FULFILLED: {
                this.FULFILLED_CALLBACK_LIST.forEach(callback => {
                    callback(this.value);
                });
                break;
            }
            case REJECTED: {
                this.REJECTED_CALLBACK_LIST.forEach(callback => {
                    callback(this.reason);
                });
                break;
            }
        }
    }
    ```

7. then的返回值 then的回调函数在微任务环境下运行，用queueMicrotask包裹回调函数如果 then的回调函数中有报错，则返回的新的promise的状态值将会变为rejected并返回reason 注意： 获取then的回调函数的返回值x，并调用resolvePromise方法，来判断then返回的新的promise的状态值

const fulfilledMicrotask = () => {
    queueMicrotask(() => {
        try {
            const x = realOnFulfilled(this.value);
            this.resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
            reject(e)
        }
    })
};
const rejectedMicrotask = () => {
    queueMicrotask(() => {
        try {
            const x = realOnRejected(this.reason);
            this.resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
            reject(e);
        }
    })
}

resolvePromise

resolvePromise(promise2, x, resolve, reject) {
    // 如果 newPromise 和 x 指向同一对象，以 TypeError 为据因拒绝执行 newPromise
    // 这是为了防止死循环
    if (promise2 === x) {
        return reject(new TypeError('The promise and the return value are the same'));
    }

    if (x instanceof MPromise) {
        // 如果 x 为 Promise ，则使 newPromise 接受 x 的状态
        // 也就是继续执行x，如果执行的时候拿到一个y，还要继续解析y
        queueMicrotask(() => {
            x.then((y) => {
                this.resolvePromise(promise2, y, resolve, reject);
            }, reject);
        })
    } else if (typeof x === 'object' || this.isFunction(x)) {
        // 如果 x 为对象或者函数
        if (x === null) {
            // null也会被判断为对象
            return resolve(x);
        }
        let then = null;
        try {
            // 把 x.then 赋值给 then 
            then = x.then;
        } catch (error) {
            // 如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise
            return reject(error);
        }
        // 如果 then 是函数
        if (this.isFunction(then)) {
            let called = false;
            // 将 x 作为函数的作用域 this 调用
            // 传递两个回调函数作为参数，第一个参数叫做 resolvePromise ，第二个参数叫做 rejectPromise
            try {
                then.call(
                    x,
                    // 如果 resolvePromise 以值 y 为参数被调用，则运行 resolvePromise
                    (y) => {
                        // 需要有一个变量called来保证只调用一次.
                        if (called) return;
                        called = true;
                        this.resolvePromise(promise2, y, resolve, reject);
                    },
                    // 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise
                    (r) => {
                        if (called) return;
                        called = true;
                        reject(r);
                    });
            } catch (error) {
                // 如果调用 then 方法抛出了异常 e：
                if (called) return;

                // 否则以 e 为据因拒绝 promise
                reject(error);
            }
        } else {
            // 如果 then 不是函数，以 x 为参数执行 promise
            resolve(x);
        }
    } else {
        // 如果 x 不为对象或者函数，以 x 为参数执行 promise
        resolve(x);
    }
}

catch方法 catch方法返回的也是一个新的promise

catch (onRejected) {
    return this.then(null, onRejected);
}

到此，简单的Promise实现就完成啦！

过程中看了不少资料和测试题，如果有不对的地方请大佬们多多指教一下~

从0到1！搞定Promise