概述本节要实现的功能

• 实现new的过程
• 实现then方法
• 状态凝固
• 异步代码的处理

实现new的过程

在实现new过程之前先了解一下promise在new的时候业务逻辑
1、外部通过构造函数传入一个立即执行方法executor，该方法有两个形参并且都为函数，然后将当前实例的状态值设置为pending
2、promise内建了两个方法resolve与reject，并作为实参运行executor
3、如果executor中使用了resolve方法，则改变当前实例的状态为fulfilled，并记录其resolve的结果
4、如果executor中使用了reject方法，则改变当前实例的状态为rejected，并记录出错原因

class MyPromise {
    status = "pending"; // 状态
    value = undefined;  // 使用resove时记录的值
    reason = undefined; // 使用reject时记录的出错原因

    constructor(executor) {
        // 创建resolve方法
        const resolve = res => {
            this.status = "fulfilled";
            this.value = res;
        }
        // 创建reject方法
        const reject = err => {
            this.status = "rejected";
            this.reason= err;
        }
        // 尝试执行executor，并将resolve,reject作为实参传给外部使用
        // 如果创建实例时没有传executor方法时则直接报错，走reject
        try {
            executor(resolve, reject);
        } catch(err) {
            reject(err);
        }
    }
}

实现then方法

同样首先了解一下then方法的工作逻辑
1、通过promise实例调用then方法，并传入两个函数onFulfilled(用于处理完成后的工作)，onRejected(用于处理出错时的工作)作为实参
2、判断当初实例的状态，为fulfilled则执行onFulfilled方法并将结果传入，如果为rejected则执行onReject方法并将出错信息传入

class MyPromise {
    status = "pending"; // 状态
    value = undefined;  // 使用resove时记录的值
    reason = undefined; // 使用reject时记录的出错原因

    constructor(executor) {
        // 创建resolve方法
        const resolve = res => {
            this.status = "fulfilled";
            this.value = res;
        }
        // 创建reject方法
        const reject = err => {
            this.status = "rejected";
            this.reason = err;
        }
        // 尝试执行executor，并将resolve,reject作为实参传给外部使用
        // 如果创建实例时没有传executor方法时则直接报错，走reject
        try {
            executor(resolve, reject);
        } catch(err) {
            reject(err);
        }
    }

    then(onFulfilled, onRejected) {
        switch(this.status) {
            case "fulfilled":
                onFulfilled(this.value);
                break;
            case "rejected":
                onRejected(this.reason);
                break;
        }
    }
}

现在测试如下代码：

const p = new MyPromise((resolve, reject) => {
    resolve(500);
});

p.then(res => console.log(res)); // 能正确执行，打印出500

表面上看好像基本的功能是没什么问题了，那我们再看看下面一段代码：

const p = new MyPromise((resolve, reject) => {
    resolve("resolve, " + 500);
    reject("reject, ", 300);
});
p.then(
    res => console.log(res), 
    err => console.log(err)
)  

此时就会发现不对了，结果是：reject, 300，然后就会发现实例对象的状态值被反复修改，resolve,reject有多少个就修改多少次，明显不符合promise的规范。

promise规范的状态只能为pending向fulfilled,reject变更，并且一旦状态修改后，就再不能再次修改且不能再执行其它的reslove,reject操作了

此时就需要在构造函数里resolve,reject的具体执行逻辑部分加上状态判断，如下：

        // 创建resolve方法
        const resolve = res => {
            // 为了使状态一但修改后就无法修改，添加判断
            if(this.status === "pending") {
                this.status = "fulfilled";
                this.value = res;
            }
            
        }
        // 创建reject方法
        const reject = err => {
            // 为了使状态一但修改后就无法修改，添加判断
            if(this.status === "pending") {
                this.status = "rejected";
                this.reason = err;
            }
        }

此时发现resove和reject两个方法中重复的内容比较多，把代码优化一下，完整代码如下：

function changePromiseStatus(tar, key, value) {
    if(tar.status === "pending") {
        tar[key] = value;
        // 如果key为value代码是fulfilled,如果key是reason是rejected
        tar.status = key === 'value' ? 'fulfilled' : 'rejected';
    }
}

class MyPromise {
    status = "pending"; // 状态
    value = undefined;  // 使用resove时记录的值
    reason = undefined; // 使用reject时记录的出错原因

    constructor(executor) {
        // 创建resolve方法
        const resolve = res => {
            changePromiseStatus(this, 'value', res);            
        }
        // 创建reject方法
        const reject = err => {
            changePromiseStatus(this, 'reason', err);         
        }
        // 尝试执行executor，并将resolve,reject作为实参传给外部使用
        // 如果创建实例时没有传executor方法时则直接报错，走reject
        try {
            executor(resolve, reject);
        } catch(err) {
            reject(err);
        }
    }

    then(onFulfilled, onRejected) {
        switch(this.status) {
            case "fulfilled":
                onFulfilled(this.value);
                break;
            case "rejected":
                onRejected(this.reason);
                break;
        }
    }
}

到此时promise的状态凝固也已经完成，但是还有一个问题，因为promise主要是解决异步问题的，那我们试着处理一下异步的情况看看？

const p = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve(500)
    }, 100);
});
p.then(res => console.log(res))

你会发现，居然没有打印任何内容，无输出。

这是因为当then方法调用的时候，此时setTimeout里的resolve(500)这条代码还未执行，此时实例的状态为pending，而此时then方法并没有pending状态的处理逻辑，所以没有内容输出。

要解决这个问题，就需要用到订阅，发布的思想了，在then中将要执行的方法用一个数组收集起来，然后在resove,reject的具体执行再遍历数组执行这些方法，这样就可以使等状态改变后才开始执行就不会出现上面这种现象。如下：

function changePromiseStatus(tar, key, value) {
    if(tar.status === "pending") {
        tar[key] = value;
        // 如果key为value代码是fulfilled,如果key是reason是rejected
        if(key === 'value') {
            tar.status = "fulfilled";
            // 开始执行搜集的方法
            tar.resolveCallbacks.forEach(fn => fn());
        } else {
            tar.status = "rejected";
            // 开始执行搜集的方法
            tar.rejectCallbacks.forEach(fn => fn());
        }
    }
}

class MyPromise {
    status = "pending"; // 状态
    value = undefined;  // 使用resove时记录的值
    reason = undefined; // 使用reject时记录的出错原因
    resolveCallbacks = []; // 用来收集状态为fulfilled时的执行方法
    rejectCallbacks = []; // 用来收集状态rejected时的执行方法

    constructor(executor) {
        // 创建resolve方法
        const resolve = res => {
            changePromiseStatus(this, 'value', res);            
        }
        // 创建reject方法
        const reject = err => {
            changePromiseStatus(this, 'reason', err);         
        }
        // 尝试执行executor，并将resolve,reject作为实参传给外部使用
        // 如果创建实例时没有传executor方法时则直接报错，走reject
        try {
            executor(resolve, reject);
        } catch(err) {
            reject(err);
        }
    }

    then(onFulfilled, onRejected) {
        switch(this.status) {
            case "fulfilled":
                onFulfilled(this.value);
                break;
            case "rejected":
                onRejected(this.reason);
                break;
            case "pending": {
                // 当状态为pending时收集待执行的方法
                this.resolveCallbacks.push(() => onFulfilled(this.value)); // 为了便于传参在外层包裹了一次方法              
                this.rejectCallbacks.push(() => onRejected(this.reason));
            }
        }
    }
}

到此一个promise最基本的功能就已经完成了，下一篇将带来promise特色的then链式调用(https://www.jianshu.com/p/f50eae420e2d)。