实现自己的promise

// 声明函数
function MyPromise(fun) {
    this.state = 'Pending';    // 状态基
    this.value = '';   // 成功回调的默认值
    this.successFun = [];    // 成功回调函数数组
    this.errFun = [];   
    var _self = this;

    // 成功时候执行
    function resolve(value) {
        // 这里需要注意，判断返回值是不是一个新的promise,  如果是，需要把这个promise.then执行得到成功的值，
        //返回的值在继 续往下走
        if (value && value instance of MyPromise) {
            value.then(resolve)
            return
        }
        _self.state = 'Fulfilled'
        _self.value = value
        if (_self.successFun.length > 0) {
            _self.successFun.forEach(cb => {
                cb(value)
            }) 
        }
    };

    function reject(err) {
        _self.value = err
        _self.state = 'Rejected'
        _self.errFun.forEach(cb => {
            cb(err)
        }) 
    };

    fun(resolve, reject);
    return _self;
}

// 在原型对象上，声明then方法
MyPromise.prototype.then = function(success, err) {
    var _self = this;
    var promise2;
    // then 方法都是返回新promise
    switch(this.state) {
        case 'Fulfilled':
            promise2 = new MyPromise(function(resolve, reject) {
                resolve(success(_self.value))
            })
            break
        case 'Rejected':
            promise2 = new MyPromise(function(resolve, reject) {
                reject(err(_self.value))
           })
            break
        case 'Pending':
            promise2 = new MyPromise(function(resolve, reject) {
                _self.successFun.push(function() {
                    resolve(success(_self.value))
                })
                _self.errFun.push(function() {
                    reject(err(_self.value))
                })
            })
            break
    }
    return promise2
}

// 调用
var p = new MyPromise(function(res, rej) {
    setTimeout(function(){
        res(2222)
    }, 1000)
})

var a = p.then(function (result) {
    console.log(result)
    return new MyPromise(function(res, rej) {
        setTimeout(function() {
            res(3333)
        }, 2000)
        res(33333)
    })
})

var b = a.then(function (result) {
    console.log(result)
    return 44444
})

var c = b.then(function (result) {
    console.log(result)
    return 55555
})

image.png

注意

• then的声明阶段是把新返回的promise的resolve方法的引用提交上一个promise成功回调里面等待执行
• 执行then的成功回调，得到上个reslove传来的值，处理得到的值传给下一个resovle(value)