原生JS實(shí)現(xiàn)簡(jiǎn)單的Promise

Steven 發(fā)布于2019-08-23 17:07 / 631人閱讀

摘要：下邊就手寫一個(gè)簡(jiǎn)單版本的。首先要了解的基本用法，是一個(gè)原生支持的構(gòu)造函數(shù)，需要傳入一個(gè)自定義函數(shù)，接受兩個(gè)參數(shù)和，接受成功數(shù)據(jù)回調(diào)，用于處理異常。基本用法為以下為的原生簡(jiǎn)單實(shí)現(xiàn)，滿足了的簡(jiǎn)單調(diào)用使用方法同的使用方法一樣

javascript es6標(biāo)準(zhǔn)中的 Promise對(duì)象在js編程中使用量很大，使用Promise可以讓異步邏輯在開發(fā)中清晰很多，了解其原理則有益在開發(fā)過程中更清晰的使用Promise對(duì)象，或者能在沒有Promise原生支持的es5標(biāo)準(zhǔn)下簡(jiǎn)單的造一個(gè)Promise對(duì)象出來。下邊就手寫一個(gè)簡(jiǎn)單版本的Promise。
首先要了解Promise的基本用法，Promise是一個(gè)原生支持的構(gòu)造函數(shù)，需要傳入一個(gè)自定義函數(shù)，接受兩個(gè)參數(shù) resolve和reject，resolve接受成功數(shù)據(jù)回調(diào)，reject用于處理異常。基本用法為：

var exp1 = new Promise(function(resolve,reject){
    try{
        setTimeout(function(){
            xxx
            resolve(xx)
        },3000)
    }catch(e){
        reject(e)
    }
})

exp1.then(function(data){
    xxx
})

以下為es5的原生簡(jiǎn)單實(shí)現(xiàn)，滿足了then的簡(jiǎn)單調(diào)用

function PromiseX(fun){
    var _this = this;
    this.status = "pendding";
    this.data = null;
    this.error = null;
    var resolve = function(data){
        _this.changeStatus("success");
        _this.thenCb&&_this.thenCb(data);
        _this.data = data;
    }
    var reject = function(e){
        _this.changeStatus("error");
        _this.thenErrCb&&_this.thenErrCb(e);
        _this.error = e;
    }
    fun&&fun(resolve,reject)
}
PromiseX.prototype.then = function(cb,errCb){
    if(this.data){
        cb&&cb(this.data);
    }
    if(this.error){
        errCb&&errCb(this.error);
    }
    this.thenCb = cb;
    this.thenErrCb = errCb;
    return this;
}
PromiseX.prototype.changeStatus = function(status){
    this.status = status;
}

使用方法同es6的使用方法一樣

var testPromiseX = new PromiseX(function(resolve){
    setTimeout(function(){
        resolve(1)
    },3000)
})
testPromiseX.then(function(res){
    alert(res)
})