Promise原理 簡單實現

2022-02-24 08:50:35 字數 2406 閱讀 6247

參考

個人認為原博的實現有點問題 在next函式的實現上, 會導致無限的呼叫

看看一般promise的用法

promise = new promise(function(resolve, reject) )

.then(function(val){}, functioin(err){})

.then(function(val){}, functioin(err){})

顯然要實現的功能是這樣的

promise物件有then方法

promise物件接受乙個引數fn(resolve, reject)

promise可以連續的then呼叫

function promise(resolver) 

} function resolve(x)

function reject(reason)

//promise最明顯的特徵 是可以then then接收兩個引數

//then就是將傳入的函式放入佇列中

this.then = function(resolve, reject)

}var p = new promise(function(resolve))

p.then(function(x))

有個問題 那就是建立乙個promise物件的時候就呼叫了 resolver(resolve, reject); 也就是呼叫了resolve('ok') 也就是呼叫了next 也就是使queue函式出佇列並執行

但是這個時候 queue 還沒有push任何值 執行不能繼續 畢竟這個是在promise物件完成建立之後才呼叫then

為了使next在then中的函式全部進到佇列之後再執行 用乙個settimeout把 next中的邏輯包裹

function promise(resolver) 

}, 0);

} function resolve(x)

function reject(reason)

this.then = function(resolve, reject)

}var p = new promise(function(resolve),1200);

}).then(function(data))

不過我們知在乙個then中 return 可能不僅僅是乙個簡單地的value , 有可能再次返回乙個promise物件 而下乙個then中resolve函式的的data是這個promise物件resolve()的值

聽起來很複雜 針對return乙個promise物件的情況 就是呼叫這個物件的then

然後再次進入next 而next的引數就是返回的promise物件的resolve的值

function promise(resolver)  else 

}}, 0);

} function resolve(x)

function reject(reason)

//promise最明顯的特徵 是可以then then接收兩個引數

//then就是將傳入的函式放入佇列中

this.then = function(resolve, reject)

}promise.resolve = promise.cast = function(x) )

}

測試

var p = new promise(function(resolve) , 1200);

}).then(function(data) , 2200);

})})

.then(function(data) )

.then(function(data) );

完善 增加promise.all() promise.resolve()

promise.resolve = promise.cast = function(x) )

}promise.all = function(promises)

}, function(err));

});});

}//******************************===

promise.resolve(999)

.then(function(data))

}).then(function(data),function(err))

promise.all([

new promise(function(resolve), 1000);

}),new promise(function(resolve))

]).then(function(results))

簡單promise實現原理

promise可以有三種狀態,分別是pedding fulfilled rejected pending promise物件例項建立時候的初始狀態 fulfilled 可以理解為成功的狀態 rejected可以理解為失敗的狀態 構造乙個promise例項需要給promise建構函式傳入乙個函式。傳入...

簡單實現Promise原理

const pending pending const resolved resolved const rejected rejected 對於不太經常更改的變數 定於為常量 function mypromise fn function reject value trycatch e mypromi...

Promise原理與實現

var promise function if this instanceof promise return new promise resolver var self this 儲存this self.callbacks 儲存onresolve和onreject函式集合 self.status p...