如何使用Axios

本篇內(nèi)容介紹了“如何使用Axios”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一、靈魂四連問

1.1 為什么要讀源代碼

1.2 如何選擇項目

1.3 如何閱讀源碼

1.4 有實際的案例么

二、如何品讀 Axios?

2.1 走進(jìn) Axios

Axios 是一個基于 Promise 的 HTTP 客戶端，同時支持瀏覽器和 Node.js 環(huán)境。它是一個優(yōu)秀的 HTTP  客戶端，被廣泛地應(yīng)用在大量的 Web 項目中。

由上圖可知，Axios 項目的 Star 數(shù)為 「78.1K」，F(xiàn)ork 數(shù)也高達(dá) 「7.3K」，是一個很優(yōu)秀的開源項目，所以值得大家細(xì)細(xì)品讀。

2.2 發(fā)現(xiàn) Axios 的美

在確認(rèn) Axios 為 “追求目標(biāo)” 之后，下一步我們就需要來發(fā)現(xiàn)它身上的優(yōu)點(特性)：

每個人對 “美”  都有不同的看法，對于阿寶哥來說，我看中了圖中已選中的三點。因此，它們也很光榮地成為讀源碼的三個切入點。當(dāng)然切入點也不是越多越好，可以先找自己最感興趣的地方作為切入點。需要注意的是，如果切入點之間有關(guān)聯(lián)關(guān)系的話，建議做個簡單的排序。

2.3 感受 Axios 的美

選擇切入點之后，我們就可以開始逐一感受 Axios 的設(shè)計之美。以 「能夠攔截請求與響應(yīng)」  這個切入點為例，首先我們就會接觸到 「攔截器」 的概念。所以我們需要先了解攔截器是什么、攔截器有什么作用以及如何使用攔截器，這里我們可以從項目的  「官方文檔」或者項目中的 「README.md」 文檔入手。

2.3.1 攔截器的作用

Axios 提供了請求攔截器和響應(yīng)攔截器來分別處理請求和響應(yīng)，它們的作用如下：

• 請求攔截器：該類攔截器的作用是在請求發(fā)送前統(tǒng)一執(zhí)行某些操作，比如在請求頭中添加 token 字段。

• 響應(yīng)攔截器：該類攔截器的作用是在接收到服務(wù)器響應(yīng)后統(tǒng)一執(zhí)行某些操作，比如發(fā)現(xiàn)響應(yīng)狀態(tài)碼為 401 時，自動跳轉(zhuǎn)到登錄頁。

2.3.2 攔截器的使用

// 添加請求攔截器 —— 處理請求配置對象 axios.interceptors.request.use(function (config) {   config.headers.token = 'added by interceptor';   return config; });  // 添加響應(yīng)攔截器 —— 處理響應(yīng)對象 axios.interceptors.response.use(function (data) {   data.data = data.data + ' - modified by interceptor';   return data; });  axios({   url: '/hello',   method: 'get', }).then(res =>{   console.log('axios res.data: ', res.data) });

在了解完攔截器的作用和用法之后，我們就會把焦點聚焦到 「axios」  對象，因為注冊攔截器和發(fā)送請求都與它有緊密的聯(lián)系。不過在看具體源碼之前，阿寶哥建議先對功能點做一下梳理。以下是阿寶哥的分析思路：

Axios 的作用是用于發(fā)送 HTTP 請求，請求攔截器和響應(yīng)攔截器分別對應(yīng)于 HTTP  請求的不同階段，它們的本質(zhì)是一個實現(xiàn)特定功能的函數(shù)。這時我們就可以按照功能把發(fā)送 HTTP 請求拆解成不同類型的子任務(wù)，比如有  「用于處理請求配置對象的子任務(wù)」，「用于發(fā)送 HTTP 請求的子任務(wù)」 和  「用于處理響應(yīng)對象的子任務(wù)」。當(dāng)我們按照指定的順序來執(zhí)行這些子任務(wù)時，就可以完成一次完整的 HTTP 請求。

既然已經(jīng)提到了任務(wù)，我們就會聯(lián)想到任務(wù)管理系統(tǒng)的基本功能：任務(wù)注冊、任務(wù)編排(優(yōu)先級排序)和任務(wù)調(diào)度等。因此我們就可以考慮從  「任務(wù)注冊、任務(wù)編排和任務(wù)調(diào)度」 三個方面來分析 Axios 攔截器的實現(xiàn)。

2.3.3 任務(wù)注冊

// 添加請求攔截器 —— 處理請求配置對象 axios.interceptors.request.use(function (config) {   config.headers.token = 'added by interceptor';   return config; });  // 添加響應(yīng)攔截器 —— 處理響應(yīng)對象 axios.interceptors.response.use(function (data) {   data.data = data.data + ' - modified by interceptor';   return data; });

在 lib/axios.js 路徑下，我們可以找到 「axios」  對象的定義。為了能直觀地了解對象之間的關(guān)系，阿寶哥建議大家在讀源碼的過程中，多動手畫畫圖。比如阿寶哥使用下圖來總結(jié)一下 Axios 對象與  InterceptorManager 對象的內(nèi)部結(jié)構(gòu)與關(guān)系：

2.3.4 任務(wù)編排

現(xiàn)在我們已經(jīng)知道如何注冊攔截器任務(wù)，但僅僅注冊任務(wù)是不夠，我們還需要對已注冊的任務(wù)進(jìn)行編排，這樣才能確保任務(wù)的執(zhí)行順序。

同樣對于任務(wù)編排，也可以使用圖的形式來展現(xiàn)任務(wù)編排后的結(jié)果?！高@里有一個小技巧，就是可以采用對比的形式來展示任務(wù)編排后的結(jié)果，這樣子會更加清楚任務(wù)編排的處理邏輯。」

2.3.5 任務(wù)調(diào)度

任務(wù)編排完成后，要發(fā)起 HTTP 請求，我們還需要按編排后的順序執(zhí)行任務(wù)調(diào)度。

需要注意的是：在閱讀源碼過程中，不要太在意細(xì)節(jié)。比如在研究 Axios 攔截器原理時，不需要再深入了解 「dispatchRequest」  背后的具體實現(xiàn)，只需知道該方法用于實現(xiàn)發(fā)送 HTTP 請求即可，這樣才不會把整個線路拉得太長。

在分析完特定的功能點之后，也許你已經(jīng)讀懂的具體的源代碼。但阿寶哥覺得這并不是最重要的，「更重要的是思考它的設(shè)計思想，這樣設(shè)計有什么好處，對于我們有沒有什么值得借鑒和學(xué)習(xí)的地方」。比如參考  Axios 攔截器的設(shè)計模型，我們就可以抽出以下通用的任務(wù)處理模型：

上面阿寶哥以 Axios 的攔截器為例，分享了讀 Axios 源碼的思路與技巧。接下來阿寶哥來分享一些讀源碼的建議和輔助工具。

三、讀源碼的建議

四、讀源碼輔助工具

如果你對下列輔助工具感興趣的話，可以通過以下圖片來源的鏈接，來直接打開每個工具的在線地址。

(圖片來源：https://www.processon.com/view/link/5f6d2beff346fb166d0ac4fd)

五、總結(jié)

其實除了上面的內(nèi)容之外，讀優(yōu)秀開源項目還有挺多值得關(guān)注的地方。阿寶哥在學(xué)習(xí) BetterScroll 項目源碼時，總結(jié)了一張思維導(dǎo)圖：

(圖片來源：https://www.processon.com/view/link/5f6d2beff346fb166d0ac4fd)

下面阿寶哥用一張圖來總結(jié)一下 axios 和 better-scroll 這兩個開源項目的學(xué)習(xí)路線：

1、Axios 項目的切入點是從 Github 中的功能特性中篩選出來的;

2、BetterScroll 的切入點是從掘金上 “BetterScroll 2.0 發(fā)布：精益求精，與你同行”  這篇文章中介紹的功能亮點中找到的。

除此之外，阿寶哥也來簡單總結(jié)一下本文介紹的讀源碼的思路與技巧：

• 站在巨人的肩膀，提前閱讀一些項目相關(guān)的優(yōu)質(zhì)文章;

• 匯總學(xué)習(xí)或工作中遇到的問題，帶著問題進(jìn)行源碼學(xué)習(xí);

• 明確閱讀源碼的主線或切入點;

• 盡可能從簡單的示例出發(fā)來分析每個功能點;

• 先梳理清楚主要流程，不要太在意細(xì)節(jié)，避免把整個線路拉得太長;

• 在閱讀源碼過程中，要多多畫圖，這樣理解起來會更加直觀。

“如何使用Axios”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！