摘要:不過最近我對于實現(xiàn)的思考過程的有了一點點個人理解,特此記下。用例我覺得實現(xiàn)一個函數(shù)跟封裝組件類似,首先從以下幾點考慮這個函數(shù)用來做什么的接受哪些參數(shù)返回值是什么那么結(jié)合例子,和這幾個問題,我們得到是做異步流程控制的。
Promise實現(xiàn)思路的個人理解
我一直覺得Promise雖然方便,但是它的寫法很怪,無法理解實現(xiàn)Promise的人是如何思考的。
不過最近我對于實現(xiàn)Promise的思考過程的有了一點點個人理解,特此記下。
感覺這篇文章我還是沒有把思路說清楚,時間緊張,就當(dāng)做一次記錄,回頭我要把這個過程在表達(dá)的在清楚一點。
用例
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)用用的,當(dāng)用戶希望下一個異步執(zhí)行時,就調(diào)用resolve(0
3.返回一個promise實例。 promise實例都有一個then方法,而then方法也返回一個新的promise實例。由此就可以鏈?zhǔn)秸{(diào)用then了
先實現(xiàn)一個Promise(未實現(xiàn)then的鏈?zhǔn)秸{(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)用時,需要傳遞進(jìn)去
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鏈?zhǔn)秸{(diào)用
then的實現(xiàn),和JQ的鏈?zhǔn)秸{(diào)用不同,JQ是每次調(diào)用方法后,把this返回
而Promise規(guī)范要求,每次都要返回新的Promise對象
所以只需要把then方法修改一下。
這部分可能會迷惑,但是我想先說一下這里做了哪些事情,其實變化不大
之前的then做了哪些事情?
就是按照不同的state,調(diào)用了successFn或者errorFn,如果是pendding狀態(tài)就先緩存起來,等將來resolve時調(diào)用
鏈?zhǔn)絫hen有哪些改動?
首先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()
因為當(dāng)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 ) } } ) }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/99325.html
摘要:鏈?zhǔn)秸{(diào)用在的使用中,我們一定注意到,是可以鏈?zhǔn)秸{(diào)用的很顯然,要實現(xiàn)鏈?zhǔn)秸{(diào)用,方法的返回值也必須是一個對象,這樣才能再次在后面調(diào)用。一種情況下,前一個的或者的返回值是普通的對象,這種情況下我們目前的可以正確處理。 本文同步自我的個人博客: http://mly-zju.github.io/ 眾所周知javascript語言的一大特色就是異步,這既是它的優(yōu)點,同時在某些情況下也帶來了一些的...
摘要:工作當(dāng)中經(jīng)常會用到,在此進(jìn)行深入學(xué)習(xí)異步編程解決方案是異步編程的一種解決方案,比傳統(tǒng)的解決方案回調(diào)函數(shù)和事件更合理和更強(qiáng)大。所有源碼注釋見學(xué)習(xí)筆記 工作當(dāng)中經(jīng)常會用到Promise,在此進(jìn)行深入學(xué)習(xí) 異步編程解決方案 Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。它由社區(qū)最早提出和實現(xiàn),ES6 將其寫進(jìn)了語言標(biāo)準(zhǔn),統(tǒng)一了用法,原生提供了...
摘要:返回的結(jié)果是一個對象,類似于表示本次后面執(zhí)行之后返回的結(jié)果。對象用于一個異步操作的最終完成或失敗及其結(jié)果值的表示簡單點說就是處理異步請求。源碼分析主要脈絡(luò)函數(shù)調(diào)用后,返回一個實例。參考鏈接解釋對象的用法的源碼及其用法 本文始發(fā)于我的個人博客,如需轉(zhuǎn)載請注明出處。為了更好的閱讀體驗,可以直接進(jìn)去我的個人博客看。 前言 知識儲備 閱讀本文需要對Generator和Promise有一個基本的...
摘要:一篇文章和一道面試題最近,有篇名為張圖幫你一步步看清和的執(zhí)行順序的文章引起了我的關(guān)注。作者用一道年今日頭條的前端面試題為引子,分步講解了最終結(jié)果的執(zhí)行原因。從字面意思理解,讓我們等等。當(dāng)前的最新版本,在這里的執(zhí)行順序上,的確存在有問題。 一篇文章和一道面試題 最近,有篇名為 《8張圖幫你一步步看清 async/await 和 promise 的執(zhí)行順序》 的文章引起了我的關(guān)注。 作者用...
摘要:主線程會暫時存儲等異步操作,直接向下執(zhí)行,當(dāng)某個異步事件觸發(fā)時,再通知主線程執(zhí)行相應(yīng)的回調(diào)函數(shù),通過這種機(jī)制,避免了單線程中異步操作耗時對后續(xù)任務(wù)的影響。 背景 在研究js的異步的實現(xiàn)方式的時候,發(fā)現(xiàn)了JavaScript 中的 macrotask 和 microtask 的概念。在查閱了一番資料之后,對其中的執(zhí)行機(jī)制有所了解,下面整理出來,希望可以幫助更多人。 先了解一下js的任務(wù)執(zhí)...
閱讀 1008·2021-10-27 14:15
閱讀 2763·2021-10-25 09:45
閱讀 1923·2021-09-02 09:45
閱讀 3357·2019-08-30 15:55
閱讀 1798·2019-08-29 16:05
閱讀 3189·2019-08-28 18:13
閱讀 3109·2019-08-26 13:58
閱讀 442·2019-08-26 12:01