這篇文章給大家分享的是有關(guān)Promise的實現(xiàn)思路是什么的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián),專注為中小企業(yè)提供官網(wǎng)建設(shè)、營銷型網(wǎng)站制作、成都響應(yīng)式網(wǎng)站建設(shè)公司、展示型網(wǎng)站建設(shè)、成都網(wǎng)站制作等服務(wù),幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營銷推廣問題。Promise實現(xiàn)思路的個人理解
我一直覺得Promise雖然方便,但是它的寫法很怪,無法理解實現(xiàn)Promise的人是如何思考的。
不過最近我對于實現(xiàn)Promise的思考過程的有了一點點個人理解,特此記下。
感覺這篇文章我還是沒有把思路說清楚,時間緊張,就當做一次記錄,回頭我要把這個過程在表達的在清楚一點。
用例
var p1 = new Promise2( ( resolve, reject ) => { setTimeout( () => { resolve( 'hello' ) }, 1000 ) } ) p1.then( res => { console.log( res + 'world' ) return res + 'world' } ) .then( res => { console.log( res + 'ziwei' ) return res + 'ziwei' } )
我覺得實現(xiàn)一個函數(shù)跟封裝組件類似,首先從以下幾點考慮:
1.這個函數(shù)用來做什么的?
2.接受哪些參數(shù)
3.返回值是什么
那么結(jié)合例子,和這幾個問題,我們得到
1.Promise是做異步流程控制的。通俗說就是,我希望某個函數(shù)暫時不執(zhí)行,等我希望它執(zhí)行時,就resolve一下,你這個函數(shù)在執(zhí)行。
2.構(gòu)造函數(shù)Promise接受一個函數(shù)。函數(shù)的參數(shù)是resolve,reject,resolve和reject也是函數(shù),是給用戶調(diào)用用的,當用戶希望下一個異步執(zhí)行時,就調(diào)用resolve(0
3.返回一個promise實例。promise實例都有一個then方法,而then方法也返回一個新的promise實例。由此就可以鏈式調(diào)用then了
先實現(xiàn)一個Promise(未實現(xiàn)then的鏈式調(diào)用)
1.Promise接受一個fn,不管其他,你覺得這個fn在內(nèi)部會干嘛?只能被調(diào)用唄,所以雖然不知道怎么搞,但是先調(diào)用一下fn(resolve,reject)
2.那這個resolve和reject不是用戶實現(xiàn)的,所以肯定是Promise開發(fā)者實現(xiàn)的,那我們要實現(xiàn)resolve和reject,它們是干嘛的,肯定用來是改變狀態(tài)的,所以定義this.state
3.resolve和reject也會接受用戶的參數(shù)吧,那我們就需要把這個參數(shù)用this.value緩存一下,將來then方法調(diào)用時,需要傳遞進去
4.then接受successFn和errorFn,這2個就是我們希望暫時不執(zhí)行的函數(shù)了。怎么做到暫時不執(zhí)行呢?就是聲明2個數(shù)組,把他們先存起來,將來resolve時,在調(diào)用
class Promise2 { constructor( fn ) { this.successFnArray = [] // 用來緩存successFn和errorFn this.errorFnArray = [] this.state = 'pendding' const resolve = ( res ) => { // resolve就做2件事情 1: 修改狀態(tài) 2:調(diào)用successFn this.state = 'fulfilled' this.value = res // this.value用來緩存data數(shù)據(jù)或者error this.successFnArray.forEach( successFn => { successFn( res ) } ) } const reject = ( err ) => { this.state = 'rejected' this.value = err this.errorFnArray.forEach( errorFn => { errorFn( res ) } ) } fn( resolve, reject ) // 先調(diào)用fn再說 } then( successFn, errorFn ) { switch ( this.state ) { case 'fulfilled': successFn( this.value ) // 如果調(diào)用了resolve,狀態(tài)就成了fulfilled,就會執(zhí)行successFn break case 'rejected': errorFn( this.value ) break case 'pendding': this.successFnArray.push( successFn ) // 如果還沒調(diào)用resolve,狀態(tài)就是pendding,就先把這些異步函數(shù)緩存起來。將來resole時調(diào)用 this.errorFnArray.push( errorFn ) } } } var p1 = new Promise2( ( resolve, reject ) => { setTimeout( () => { resolve( 'hello' ) }, 1000 ) } ) p1.then( res => { console.log( res + 'world' ) return res + 'world' } )
實現(xiàn)then鏈式調(diào)用
then的實現(xiàn),和JQ的鏈式調(diào)用不同,JQ是每次調(diào)用方法后,把this返回
而Promise規(guī)范要求,每次都要返回新的Promise對象
所以只需要把then方法修改一下。
這部分可能會迷惑,但是我想先說一下這里做了哪些事情,其實變化不大
之前的then做了哪些事情?
就是按照不同的state,調(diào)用了successFn或者errorFn,如果是pendding狀態(tài)就先緩存起來,等將來resolve時調(diào)用
鏈式then有哪些改動?
首先then有了返回值,返回一個promise,而之前沒有返回值,return的是undefined
new Promise的過程,其實邏輯沒什么變化,唯一注意的,比如狀態(tài)fulfilled時,并非直接調(diào)用successFn
而是調(diào)用_successFn,而這個函數(shù)內(nèi)部本質(zhì)上還是調(diào)用successFn(),但同時把調(diào)用的返回值作為了resolve的參數(shù),調(diào)用了resolve()
因為當successFn被調(diào)用,得到返回值時,就表示這個函數(shù)執(zhí)行完了,
就需要執(zhí)行下一個異步函數(shù)了,這樣下一個異步函數(shù)也會把successFn(res)的return值作為參數(shù)
then( successFn, errorFn ) { return new Promise2( ( resolve, reject ) => { const _successFn = res => { resolve(successFn(res)) } const _errorFn = err => { reject(errorFn(err)) } switch ( this.state ) { case 'fulfilled': _successFn( this.value ) break case 'rejected': _errorFn( this.value ) break case 'pendding': this.successFnArray.push( _successFn ) this.errorFnArray.push( _errorFn ) } } ) }
感謝各位的閱讀!關(guān)于Promise的實現(xiàn)思路是什么就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
網(wǎng)站欄目:Promise的實現(xiàn)思路是什么-創(chuàng)新互聯(lián)
文章源于:http://m.rwnh.cn/article42/dghhhc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、定制網(wǎng)站、域名注冊、云服務(wù)器、用戶體驗
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容