????????自從?Axios?成功打入?Vue?全家桶之后，便開始火的一塌糊涂！截止到目前，其在?github?上的?star?即將突破?80k?！可以說?Axios?是當(dāng)下前端界最流行的?ajax?請求庫，可(jue)能(dui)沒有之一！

????????即然?Axios?人氣如此之高，那么閱讀并研究它的源碼也是非常有必要的，因為這樣不僅可以讓自己少走很多彎路，還會對作者多年的編程思想以及經(jīng)驗進行獵取，從中抽象出一些架構(gòu)及模式性的高級內(nèi)容，最終提高自己的實現(xiàn)能力和技巧，讓自己變得更加強大！

????????啰嗦一句：閱讀源碼確實可以提升自身的編碼水平，但需要你擁有一定相關(guān)經(jīng)驗基礎(chǔ)以及相對領(lǐng)域的認知，否則看源碼絕對是在浪費時間！為什么？因為你可能看不懂！

????????本系列文章將會對?Axios?源碼思想進行精簡提煉，從而將大家所關(guān)心的一些內(nèi)部原理問題進行解答。

一、封裝一個簡易版本的?xhr + promise?的異步?ajax?請求庫

由于?axios?是一個基于?xhr + promise?的異步?ajax?請求庫，所以咱們可以先單純的封裝一個：

以上代碼實現(xiàn)了axios(config)?直接發(fā)起請求，例如：

但是，如果我想通過axios.get、axios.post?等請求方式就行不通了。

二、封裝?request

通過閱讀源碼得到一些啟示：源碼中有一個名為Axios的構(gòu)造函數(shù)，而我們的?xhr + promise?便封裝在?Axios.prototype.request?函數(shù)中。另外我們所使用的?axios.get、axios.post?等也都是定義在?Axios.prototype?中。

根據(jù)這些啟示將代碼調(diào)整為：

這樣我們終于可以通過axios.get、axios.post請求數(shù)據(jù)了

但是?axios(config)?又不行了。

三、createInstance?函數(shù)

繼續(xù)攻讀源碼發(fā)現(xiàn)：axios?本質(zhì)不是?Axios?構(gòu)造函數(shù)的實例，而是一個函數(shù)名字為?createInstance?的函數(shù)對象，在該函數(shù)中實例化了Axios。也就是說：我們所使用的axios并不是Axios的實例，而是Axios.prototype.request?函數(shù)?bind()?返回的函數(shù)。

四、axios?實現(xiàn)多種請求方式原理完整代碼：

?? 看完兩件事

如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我兩個小忙：

1. 點個「贊」或者「轉(zhuǎn)發(fā)評論」，讓更多的人也能看到這篇內(nèi)容（喜歡不點贊，都是耍流氓 -_-）

2. 關(guān)注公眾號「前端知識分享喵」，不定時更新前端技術(shù)分享，

   公眾號后臺回復(fù)「電子書」即可免費獲取精選的前端電子書。

   添加 MagnumHou 微信，可以獲取 up 主有的大機構(gòu)的學(xué)習(xí)視頻哦