简易版promise源码实现

 首先我们先看一下promise是如何使用的：

 <script>
            let p1=new Promise((resolve,reject)=>{
                    resolve()
            })
            p1.then(()=>{
                console.log(123)
            })
 </script>

  通过promise构建出来的对象有三种状态，Pending(进行中)，Fulfilled(已成功)，Rejected(已失败)

状态只能由 Pending 变为 Fulfilled 或由 Pending 变为 Rejected ，且状态改变之后不会在发生变化，会一直保持这个状态。

  通过then函数注册成功或者失败函数，promise内部调用resolve或者reject调用对应的函数。

; (function () {
    const status = {
        0: "pending",
        1: "fulfilled",
        2: "rejected"
    }
    class customePromise {
        constructor(func) {
            if (typeof func != "function") {
                throw TypeError("Promise resolver " + func + " is not a function")
            }
            func(this._resolve.bind(this), this._reject.bind(this));
        }
        _resolve(val) {
        }
        _reject(val) {
        }
    }
    window.customePromise = customePromise;
})();

　首先我们定义了一个customePromise的类，通过window暴露出去，通过前面promise调用我们可以看到参数是一个函数，该函数接受两个参数，resolve，reject,通过调用两个函数来执行对应的成功或者失败函数。第一步，我们在内部首先要判断传入是否为一个函数，才进行下一步操作。

; (function () {
    const status = {
        0: "pending",
        1: "fulfilled",
        2: "rejected"
    }
    class customePromise {
        constructor(func) {
            this._status = status[0];
            this.resolveArr = [];
            this.rejectArr = [];
            this.value="";
            if(typeof func!="function"){
                throw TypeError("Promise resolver "+ func+" is not a function")
            }
            try {
                func(this._resolve.bind(this), this._reject.bind(this));
            }
            catch (err) {
                this._reject(err)
            }
        }
        _resolve(val) {
        }
        _reject(val) {
        }
    }
    window.customePromise = customePromise;
})();

promise最大的好处就是他的捕获机制，一旦你在外部函数吃错都可以在内部可以捕获到，这样你外面的脚本还能继续往下执行，并通过失败函数可以打印出来。

一开始我们在构造函数开始执行的时候保存了这个对象状态为pending，然后在这个promise对象上挂载了两个属性用来保存成功和失败函数。下面我们来实现then函数

  then(resolveFunc, rejectFunc) {
            switch (this._status) {
                case "pending":
                    this.resolveArr.push(resolveFunc);
                    this.rejectArr.push(rejectFunc);
                    break;
                case "fulfilled":
                    resolvefunc(this.value)
                    break;
                case "rejected":
                    rejectfunc(this.value)
                    break;
            }
}

通过判断promise对象来决定函数是否执行，如果处于pending状态，就把成功失败函数存入对应的数组，如果状态已经改变，就执行对应的函数。下面实现成功失败函数的代码。

    _resolve(val) {
            setTimeout(() => {
                this.value=val;
                this._status = status[1];
                this.resolveArr.forEach(item => {
                    item(val);
                })
            }, 0)
        }
        _reject(val) {
            setTimeout(() => {
                this.value=val;
                this._status = status[2];
                this.rejectArr.forEach(item => {
                    item(val);
                })
            }, 0)
 }

 注意下我们的promise属于微任务，他会让我们主线程的任务先执行，所以我们这里采用异步模拟。但这里还是存在一个问题，就是我们可以在外部多次调用，这明显是不允许，所以我们来优化下代码。

_resolve(val) {
            setTimeout(() => {
                if (this._status != status[0]) {
                    return;
                }
                this.value=val;
                this._status = status[1];
                this.resolveArr.forEach(item => {
                    item(val);
                })
            }, 0)
        }
        _reject(val) {
            setTimeout(() => {
                if (this._status != status[0]) {
                    return;
                }
                this.value=val;
                this._status = status[2];
                this.rejectArr.forEach(item => {
                    item(val);
                })
            }, 0)
}

 用过jquery的同学都知道jquery是可以链式调用，同样我们的promise也是可以的，那就表示我们的then函数返回值同样也是个promise对象，下面我们来改写then函数。

   then(resolveFunc, rejectFunc) {
            let resolvefunc, rejectfunc;
            let _this = this;
            return new customePromise(function (resolve, reject) {
                resolvefunc = function (val) {
                    let value = resolveFunc(val);
                    resolve(value)
                }
                rejectfunc = function (val) {
                    let value = rejectFunc(val);
                    reject(value)
                }
                switch (_this._status) {
                    case "pending":
                        _this.resolveArr.push(resolvefunc);
                        _this.rejectArr.push(rejectfunc);
                        break;
                    case "fulfilled":
                        resolvefunc()
                        break;
                    case "rejected":
                        rejectfunc
                        break;
                }
            })

        }

　　注意这里并不好理解，因为之前我们存入的事成功和失败函数，这里我们包装了一个函数并把then函数返回值promise对象的resolve函数也存入进去，这就表示如果我们第一个promise状态改变会接着触发第二个promise对象的执行，但需要注意如果我们函数的返回值同样是一个promise对象的话，我们必要要等待其状态改变才能触发他的下一个的then函数，这是一个难点，很不好理解，我们使用过把then函数返回的promise对象的resolve时间挂在函数内部的then上面，一旦内部函数状态改变会触发then函数的对应的事件，当然我们也是要加上容错处理，下面附上代码: 

 then(resolveFunc, rejectFunc) {
            let resolvefunc, rejectfunc;
            let _this = this;
            return new customePromise(function (resolve, reject) {
                resolvefunc = function (val) {
                    try {
                        if (typeof resolveFunc != "function") {
                            resolve(val)
                        }
                        else {
                            let value = resolveFunc(val);
                            if (value instanceof customePromise) {
                                value.then(resolve)
                            }
                            else {
                                resolve(value)
                            }
                        }
                    }
                    catch (err) {
                        console.log(err)
                        reject(err)
                    }
                }
                rejectfunc = function (val) {
                    try {
                        if (typeof rejectFunc != "function") {
                            resolve(val)
                        }
                        else {
                            let value = rejectFunc(val);
                            if (value instanceof customePromise) {
                                value.then(reject)
                            }
                            else {
                                reject(value)
                            }
                        }
                    }
                    catch (err) {
                        reject(err)
                    }

                }
                switch (_this._status) {
                    case "pending":
                        _this.resolveArr.push(resolvefunc);
                        _this.rejectArr.push(rejectfunc);
                        break;
                    case "fulfilled":
                        resolvefunc()
                        break;
                    case "rejected":
                        rejectfunc
                        break;
                }
            })
        }

 最后说一下resolve()参数如果是一个promise对象的话，必须要等待参数的状态改变才能触发他的then函数，原理跟上面的很相似。

 _resolve(val) {
            setTimeout(() => {
                if (val instanceof customePromise) {
                    val.then(()=>{
                        this._status = status[1];
                        this.resolveArr.forEach(item => {
                            item(val);
                        })
                    })
                    return;
                }
                if (this._status != status[0]) {
                    return;
                }
                this._status = status[1];
                this.resolveArr.forEach(item => {

                    item(val);
                })
            }, 0)
        }
        _reject(val) {
            setTimeout(() => {
                if (val instanceof customePromise) {
                    val.then(()=>{
                        this._status = status[2];
                        this.rejectArr.forEach(item => {
                            item(val);
                        })
                    })
                    return;
                }
                if (this._status != status[0]) {
                    return;
                }
                this._status = status[2];
                this.rejectArr.forEach(item => {
                    item(val);
                })
            }, 0)
        }

最后附上所有的代码：

; (function () {
    const status = {
        0: "pending",
        1: "fulfilled",
        2: "rejected"
    }
    class customePromise {
        constructor(func) {
            this._status = status[0];
            this.resolveArr = [];
            this.rejectArr = [];
            if(typeof func!="function"){
                throw TypeError("Promise resolver "+ func+" is not a function")
            }
            try {
                func(this._resolve.bind(this), this._reject.bind(this));
            }
            catch (err) {
                this._reject(err)
            }
        }
        _resolve(val) {
            setTimeout(() => {
                if (val instanceof customePromise) {
                    val.then(()=>{
                        this._status = status[1];
                        this.resolveArr.forEach(item => {
                            item(val);
                        })
                    })
                    return;
                }
                if (this._status != status[0]) {
                    return;
                }
                this._status = status[1];
                this.resolveArr.forEach(item => {
                    item(val);
                })
            }, 0)
        }
        _reject(val) {
            setTimeout(() => {
                if (val instanceof customePromise) {
                    val.then(()=>{
                        this._status = status[2];
                        this.rejectArr.forEach(item => {
                            item(val);
                        })
                    })
                    return;
                }
                if (this._status != status[0]) {
                    return;
                }
                this._status = status[2];
                this.rejectArr.forEach(item => {
                    item(val);
                })
            }, 0)
        }
        then(resolveFunc, rejectFunc) {
            let resolvefunc, rejectfunc;
            let _this = this;
            return new customePromise(function (resolve, reject) {
                resolvefunc = function (val) {
                    try {
                        if (typeof resolveFunc != "function") {
                            resolve(val)
                        }
                        else {
                            let value = resolveFunc(val);
                            if (value instanceof customePromise) {
                                value.then(resolve)
                            }
                            else {
                                resolve(value)
                            }
                        }
                    }
                    catch (err) {
                        console.log(err)
                        reject(err)
                    }

                }
                rejectfunc = function (val) {
                    try {
                        if (typeof rejectFunc != "function") {
                            resolve(val)
                        }
                        else {
                            let value = rejectFunc(val);
                            if (value instanceof customePromise) {
                                value.then(reject)
                            }
                            else {
                                reject(value)
                            }
                        }
                    }
                    catch (err) {
                        reject(err)
                    }
                }
                switch (_this._status) {
                    case "pending":
                        _this.resolveArr.push(resolvefunc);
                        _this.rejectArr.push(rejectfunc);
                        break;
                    case "fulfilled":
                        resolvefunc()
                        break;
                    case "rejected":
                        rejectfunc
                        break;
                }
            })
        }
    }
    window.customePromise = customePromise;
})();