實現自己的promise

異彩發表於2018-12-21

直接程式碼

// 宣告函式
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)

相關文章