如何使用Axios

本篇內容介紹了“如何使用Axios”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

一、靈魂四連問

1.1 為什么要讀源代碼

1.2 如何選擇項目

1.3 如何閱讀源碼

1.4 有實際的案例么

二、如何品讀 Axios?

2.1 走進 Axios

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

由上圖可知，Axios 項目的 Star 數為 「78.1K」，Fork 數也高達 「7.3K」，是一個很優秀的開源項目，所以值得大家細細品讀。

2.2 發現 Axios 的美

在確認 Axios 為 “追求目標” 之后，下一步我們就需要來發現它身上的優點(特性)：

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

2.3 感受 Axios 的美

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

2.3.1 攔截器的作用

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

• 請求攔截器：該類攔截器的作用是在請求發送前統一執行某些操作，比如在請求頭中添加 token 字段。

• 響應攔截器：該類攔截器的作用是在接收到服務器響應后統一執行某些操作，比如發現響應狀態碼為 401 時，自動跳轉到登錄頁。

2.3.2 攔截器的使用

// 添加請求攔截器 —— 處理請求配置對象 axios.interceptors.request.use(function (config) {   config.headers.token = 'added by interceptor';   return config; });  // 添加響應攔截器 —— 處理響應對象 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」  對象，因為注冊攔截器和發送請求都與它有緊密的聯系。不過在看具體源碼之前，阿寶哥建議先對功能點做一下梳理。以下是阿寶哥的分析思路：

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

既然已經提到了任務，我們就會聯想到任務管理系統的基本功能：任務注冊、任務編排(優先級排序)和任務調度等。因此我們就可以考慮從  「任務注冊、任務編排和任務調度」 三個方面來分析 Axios 攔截器的實現。

2.3.3 任務注冊

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

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

2.3.4 任務編排

現在我們已經知道如何注冊攔截器任務，但僅僅注冊任務是不夠，我們還需要對已注冊的任務進行編排，這樣才能確保任務的執行順序。

同樣對于任務編排，也可以使用圖的形式來展現任務編排后的結果。「這里有一個小技巧，就是可以采用對比的形式來展示任務編排后的結果，這樣子會更加清楚任務編排的處理邏輯。」

2.3.5 任務調度

任務編排完成后，要發起 HTTP 請求，我們還需要按編排后的順序執行任務調度。

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

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

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

三、讀源碼的建議

四、讀源碼輔助工具

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

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

五、總結

其實除了上面的內容之外，讀優秀開源項目還有挺多值得關注的地方。阿寶哥在學習 BetterScroll 項目源碼時，總結了一張思維導圖：

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

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

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

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

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

• 站在巨人的肩膀，提前閱讀一些項目相關的優質文章;

• 匯總學習或工作中遇到的問題，帶著問題進行源碼學習;

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

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

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

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

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