一步一步實現一個符合PromiseA+規範的Promise庫（3）

平常先打個招呼。。

今天咱們就來完整的實現以前還留有一些小的方法沒實現的Promise。。

回顧：一步一步實現一個符合PromiseA+規範的Promise庫（1）

一步一步實現一個符合PromiseA+規範的Promise庫（2）

咱們都知道，Promise中的經常使用方法有then、catch、Promise.resolve、Promise.reject、Promise.all、Promise.race這些經常使用方法，接下來咱們就一一來實現它們。

先來實現.catch方法。

咱們來看如下代碼

咱們這裏使用的是es6原生的Promise,看到在catch拿到了reject的結果。並且咱們看到，在then方法中只有onfulfilled一個回掉函數。

並且，catch方法是支持鏈式調用的，so。。咱們須要把這個方法掛載到咱們的Promise上。

這樣咱們就實現了Promise中的catch方法，是否是很簡單。

能夠從以前的測試中看到，.catch方法中的參數只有一個回掉函數，這個回掉函數中有一個參數。咱們不難看出來，無論怎樣，這個catch方法拿到的老是咱們程序onrejected狀態下的值。因此咱們return一個then方法並且只給這個then方法onrejected回調。then方法中onfulfilled狀態咱們傳了一個null，爲何？其實咱們前面有講到過，請參考我上一篇文章： 一步一步實現一個符合PromiseA+規範的Promise庫（2）中的onfulfilled和onrejected默認值的問題。這裏咱們就再也不贅述了。

咱們再來看看Promose.resolve和Promise.reject這兩個方法。

額。。其實這兩個方法也就是分別返回一個成功和失敗的Promise。這兩個方法做爲靜態方法直接掛在到Promise上便可。

接下來咱們實現Promise.all方法。

咱們知道Promise.all這個方法是處理多個Promise組成的數組而且返回一個Promise,當所有的Promise處理完畢後在咱們下次調用then方法時將這個處理結果的數組返回。咱們看下下面的代碼。

Promise.all用法

因此咱們能夠根據這個原理，來實現咱們的Promise.all方法。

咱們來看如下代碼。

額。。我以爲已經蠻清楚了，再捋一捋。

拿到參數Promise數組->遍歷執行(調用其then方法)->存放到返回數組中->判斷執行是否完畢(完畢：返回咱們的數組)。

今天有些晚了，就先實現這幾個吧。race方法等明天或者有空吧。而後咱們再來分享下javascript的異步發展流程。。

最初的callback->Promise->generator函數->咱們如今經常使用的 async await

就醬：）

更新

race方法的實現。

Promise.race這個方法頗有意思。。這個方法也是跟all方法同樣接受一個Promise組成的數組，可是這些個Promise只要有一個成功了，咱們的race方法也就執行完畢了，而且返回Promise的執行結果。咱們先來看下用法。

咱們看到這裏race方法中有一個Promise數組，不過只返回了一個結果。而且這個race方法也返回了一個Promise，由於咱們在接下來的then方法中拿到了以前的執行結果。so。咱們來實現下。

咱們能夠看到，在循環中咱們直接調用了傳進來的那些Promise，而後當成功時會直接調用咱們返回的Promise的resolve方法把執行的結果返回出去。

到這裏咱們基本上就實現了一個比較完整的Promise，固然這個Promise還相對簡單。不過咱們也蠻不錯了。

接下來咱們看一下js的異步發展流程.

咱們都知道之前好比說咱們在處理異步的時候一般會有這樣的代碼。

回調函數

若是{

我是說{

            能不能{

                        幹一件事{

                         }

            }

    }
複製代碼

}

醜的一批。。

。。其實也還好，主要是還蠻好看的。可是若是咱們異步作的多了，回調地獄天然不可避免。因此Promise應運而生。

咱們再來看下Promise

通常的代碼是這樣

Promise.resolve().then().then()......

then多了也不咋好看。。並且一個then中兩個回調，再返回Promise。。EMMMMM。。

而後出現的就是咱們的generator函數。

generator

若是用過generator函數的小夥伴們應該知道。generator能夠在執行過程當中屢次返回，因此它看上去就像一個能夠記住執行狀態的函數，generator函數一般配合Promise和tj寫的co庫來使用。因爲generator函數會產生一個執行器，咱們要使用這個執行器的next方法來執行咱們的異步方法去獲得咱們想要的值。

若是有些小夥伴還不明白generator的工做方式，能夠去看一下他的使用方法。->Generator 函數的含義與用法

co庫能夠幫助咱們不去管執行器中的next方法，返回一個Promise而且把執行結果放到返回的Promise的then方法中。

咱們能夠本身實現一個co庫，其實也是很簡單的一個方法。

咱們看一下測試結果

發現依舊是沒有問題的。這樣咱們就寫了一個簡單的co庫來幫助咱們使用generator函數。

最後一個就是咱們的async和await。

async-await

咱們能夠看到，async和await，使用起來跟generator函數相似，其實呢，async和await就是generator和yield的一種語法糖，

固然這個語法糖的實現比較複雜，咱們若是有時間的話還會跟你們一塊兒實現一下。咱們這裏先看看他的用法。

咱們能夠看到，async方法同樣的返回了一個Promise，而且至關於自動執行了generator中的next方法，使得咱們沒必要再耗費精力去處理執行器，在開發中使咱們的開發體驗變好了許多。。畢竟代碼仍是簡潔明瞭好一點。。。

好了，一路走來咱們也算比較完整的瞭解了Promise的實現原理，咱們也算是完成了一個符合Promise/A+規範的Promise庫。而後咱們還了解了js近些年來的異步發展，有沒有以爲本身很棒呢。。（反正我是以爲咱們蠻厲害）

最後，但願你們不論是生活仍是學習和工做中均可以更好。再次感謝你們能夠看到這裏，謝謝。

就醬，Bye~