資訊專欄INFORMATION COLUMN
摘要：我們都知道，方法中有和兩個回調(diào)函數(shù)，所以我們要處理一下這兩個回調(diào)函數(shù)。我們實(shí)現(xiàn)了異步調(diào)用，在方法中返回或者值，實(shí)現(xiàn)了方法中可以沒有回調(diào)函數(shù)也能把執(zhí)行結(jié)果傳入下一次的方法中。
Hello everybody。我又來啦，還記得我們上一張實(shí)現(xiàn)的內(nèi)容嗎？
上一張我們實(shí)現(xiàn)了一個簡單的Promise。我們實(shí)現(xiàn)了Promise內(nèi)部的簡單流程和then方法，并且實(shí)現(xiàn)了Promise的異步調(diào)用。但是我們也留下了一些問題。。。
由于今天的代碼是基于上一次我們實(shí)現(xiàn)的內(nèi)容，所以不甚了解的小伙伴們可以去看我上一篇文章。。
文章地址：一步一步實(shí)現(xiàn)一個符合PromiseA+規(guī)范的Promise庫（1）
問題一：then方法的鏈?zhǔn)秸{(diào)用
我們都知道，一個Promise是可以在其中再次返回Promise的（當(dāng)然也可以返回一個普通的值）。而且呢，返回的Promise或者返回的普通值我們需要去拿到它的值并且回傳給我們下一次的then方法中。比如：
當(dāng)然我們也可以在then方法中返回一個Promise；
所以問題就來了。
問題二：如果在then方法中返回Promise或者普通值的情況，我們需要怎么處理。
so，開搞。
我們先來處理第一個問題，讓我們的then方法支持鏈?zhǔn)秸{(diào)用，并且能接受普通值。
我們先來修改then方法中的對于成功狀態(tài)（onfulfilled）的判斷，因為下面的跟他是相同的道理。
這里我們首先來看定義的Promise2。為什么要定義這樣一個變量呢？
我們要知道，如果要實(shí)現(xiàn)Promise中then方法的鏈?zhǔn)秸{(diào)用。當(dāng)?shù)谝粋€then運(yùn)行完畢并且把返回值給我們之后，我們也要返回這個值。
我們不禁要問了？一個值怎么怎么會有then方法呢？所以我們要把這個值包裝成一個Promise對象給返回出去。
所以說，我們需要使每個狀態(tài)都返回一個Promise。。說的有點(diǎn)多。我們來測試一下。
我們接著改下面兩個狀態(tài)。
我們來捋一捋。通過測試。
我們看到代碼運(yùn)行了2.496秒，我們的測試結(jié)果是正確的；
到這里我們就解決了then方法鏈?zhǔn)秸{(diào)用并且在then方法中返回一個普通值到下一次then方法的成功狀態(tài)中。
是不是感覺很爽
接下來我們解決第二個問題。我們是需要允許在then方法中返回Promise的。。所以，我們也要處理這種情況。
Let us try to do it
展示一下我深厚的英語功底
其實(shí)很簡單，我們需要一個統(tǒng)一的處理函數(shù)來進(jìn)行在then中返回Promise的處理。。
我們先新建一個方法叫做resolvePromise（Promise的決定）
在規(guī)范中說道。
什么意思呢，就是說如果Promise2和x指向的是同一個對象，我們這里就要把需要返回的Promise2置為reject并且要返回一個類型錯誤。看下面的代碼
額，就是這樣
然后我們描述一下細(xì)節(jié)。。
emmmmmmmm...
這TM有點(diǎn)細(xì)節(jié)。。
好了不逗了，我們在代碼里面分析的很清楚了。我們來捋一捋思路。
在then方法中是可以返回一個Promise的對吧，然后我們拿到了then方法的執(zhí)行結(jié)果，也就是可能是一個Promise或者是一個普通值（也就是x）。然后我們對這個x進(jìn)行判斷，我們首先要判斷這個x是不是一個Promise對吧。
如果不是我們可以直接返回x，如果是的話，我們應(yīng)該知道，Promise都會有then方法。我們接下來就需要判斷這個then方法是不是一個function。如果不是我們就直接返回這個then的值，emmm...他應(yīng)給就是一個普通值。
如果這個then方法是一個function我們就可以直接去執(zhí)行他。我們在兩個回調(diào)中進(jìn)行操作，如果執(zhí)行的是onfulfilled則我們進(jìn)行了關(guān)鍵的一步，就是遞歸調(diào)用我們的resolvePromise方法去看我們的onfulfilled傳進(jìn)來的參數(shù)是否還是一個Promise,,就這樣一直調(diào)用，，直到x或者x.then是一個普通的值為止，然后我們就可以返回這個值，也就是resolve我們最后的值。
當(dāng)然我們這里加了try{}catch(){}還是為了避免程序運(yùn)行中的錯誤。
然后我們就可以把我們之前的狀態(tài)判斷中的resolve替換成我們的resolvePromise方法，例如：
當(dāng)然下面的pending狀態(tài)也是一樣的。
到這里我們的Promise已經(jīng)實(shí)現(xiàn)的差不多了。但是還有一個問題。我們思考以下代碼；
上面代碼用的是ES6的原生的Promise
what？我們可以看到，第一個then方法中并沒有任何東西，然而我們第二個then中卻拿到了promies中resolve的值。
我們都知道，then方法中有onfulfilled和onreject兩個回調(diào)函數(shù)，所以我們要處理一下這兩個回調(diào)函數(shù)。
注意onrejected中的default函數(shù)返回是用了throw。因為我們要返回到下一次的reject中
我們可以在then方法中處理一下這兩個回調(diào)。判斷一下他們的類型，如果類型是function就代表這兩個回調(diào)是有東西的。不然呢我們就返回一個默認(rèn)的匿名函數(shù)，這個函數(shù)的參數(shù)就是上一次Promise返回的值，也就是當(dāng)我們再次執(zhí)行onfulfilled或者onrejected的時候就可以直接拿到這個值了。也就完成了我們想要的效果。
現(xiàn)在，我們基本上就實(shí)現(xiàn)了一個比較完整地Promise。我們實(shí)現(xiàn)了Promise異步調(diào)用，在then方法中返回Promise或者值，實(shí)現(xiàn)了then方法中可以沒有回調(diào)函數(shù)也能把執(zhí)行結(jié)果傳入下一次的then方法中。
當(dāng)然我們基本清楚了Promise的基本原理，以后我們就可以說我們既會使用又可以實(shí)現(xiàn)一個Promise。
當(dāng)然還有一些小小的問題，就是Promise中有許多方法我們沒有實(shí)現(xiàn)。例如：
Promise.resolve() . Promise.reject() ..還有.catch()方法 Promise.all()方法等等
在下一篇文章中，我們會一一的去實(shí)現(xiàn)這些方法，并且會介紹一下前端開發(fā)這些年的異步發(fā)展流程
最初的callback->Promise->generator函數(shù)->我們現(xiàn)在常用的 async await
好了，就到這里吧。看到這里蠻不容易，謝謝大家。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93732.html
摘要：今天我們來自己手寫一個符合規(guī)范的庫。是異步編程的一種解決方案，比傳統(tǒng)的解決方案回調(diào)函數(shù)和事件更合理和更強(qiáng)大。我們可以看到，其實(shí)就是一個構(gòu)造函數(shù)。所以說我們的數(shù)組里存的是一個一個的的回調(diào)函數(shù)，也就是一個一個。 今天我們來自己手寫一個符合PromiseA+規(guī)范的Promise庫。大家是不是很激動呢？？ showImg(https://segmentfault.com/img/bV6t4Z?...
摘要：簡單實(shí)現(xiàn)前言你可能知道，的任務(wù)執(zhí)行的模式有兩種同步和異步。你已經(jīng)實(shí)現(xiàn)了方法方法是一個很好用的方法。感興趣的朋友可以自行去研究哈附上代碼完整的實(shí)現(xiàn)個人博客鏈接 Promise 簡單實(shí)現(xiàn) 前言 你可能知道，javascript 的任務(wù)執(zhí)行的模式有兩種：同步和異步。 異步模式非常重要，在瀏覽器端，耗時很長的操作（例如 ajax 請求）都應(yīng)該異步執(zhí)行，避免瀏覽器失去響應(yīng)。 在異步模式編程中，我...
摘要：不同的的實(shí)現(xiàn)需要可以相互調(diào)用，搞清楚了標(biāo)準(zhǔn)之后，開始動手吧構(gòu)造函數(shù)產(chǎn)生一個對象有很多種方法，構(gòu)造函數(shù)是看起來最面向?qū)ο蟮囊环N，而且原生實(shí)現(xiàn)也是使用的構(gòu)造函數(shù)，因此我也決定使用構(gòu)造函數(shù)的方法。 -- What i cant create, i dont understant 前言 實(shí)現(xiàn)Promise的目的是為了深入的理解Promies，以在項目中游刃有余的使用它。完整的代碼見gitHub...
摘要：以上代碼，可以完美通過所有用例。在的函數(shù)中，為何需要這個同樣是因為規(guī)范中明確表示因此我們需要這樣的來確保只會執(zhí)行一次。其他情況，直接返回以該值為成功狀態(tài)的對象。 Promise是前端面試中的高頻問題，我作為面試官的時候，問Promise的概率超過90%，據(jù)我所知，大多數(shù)公司，都會問一些關(guān)于Promise的問題。如果你能根據(jù)PromiseA+的規(guī)范，寫出符合規(guī)范的源碼，那么我想，對于面試...
摘要：嗝首先，我們通過字面可以看出來是一種解決方案，而且還有兩種傳統(tǒng)的解決方案回調(diào)函數(shù)和事件，，那么我們就來先聊聊這兩種方案。 前言 雖然今年已經(jīng)18年，但是今天還是要繼續(xù)聊聊ES6的東西，ES6已經(jīng)過去幾年，可是我們對于ES6的語法究竟是掌握了什么程度，是了解？會用？還是精通？相信大家和我一樣都對自己有著一個提升的心，對于新玩具可不能僅僅了解，對于其中的思想才是最吸引人的，所以接下來會通過...
閱讀 3630·2021-11-22 09:34
閱讀 3198·2021-11-15 11:38
閱讀 3078·2021-10-27 14:16
閱讀 1261·2021-10-18 13:35
閱讀 2437·2021-09-30 09:48
閱讀 3439·2021-09-29 09:34
閱讀 1662·2019-08-30 15:54
閱讀 1830·2019-08-26 11:57
