中了源碼的毒，給你一副良藥

作者：阿寶哥 2020-10-26 07:00:11

開發前端

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

[[348328]]

本文轉載自微信公眾號「全棧修仙之路」，作者阿寶哥。轉載本文請聯系全棧修仙之路公眾號。

一、靈魂四連問

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; 
});