三步法解析Axios源碼

作者：執鳶者 2021-09-04 23:27:58

開發前端

宏觀的事聊完了，下面就詳細聊幾個核心細節吧：整個流程、請求/響應攔截器、dispatchRequest是個啥、請求/響應數據轉換器。

[[421684]]

一、領悟思想

Axios是一個基于Promise的HTTP庫，根據官網介紹，有以下幾個特點：

在瀏覽器端會創建XMLHttpRequests
在Node端會創建HTTP請求
由于Axios是一個基于Promise的HTTP庫，所以其支持Promise API
支持請求和響應攔截器
支持請求和響應數據轉換
支持取消請求
自動轉換JSON數據
客戶端支持防御XSRF攻擊

通過上述官網介紹的特點，我認為其突出的優點有三個：

支持Promise API，可以方便進行鏈式調用;
支持請求和響應攔截器，該攔截器將Node中中間件思想引入該庫，在請求發送之前和響應接收之后可以對其進行處理。
支持數據轉換器，轉換器主要負責數據發送前以及響應接收后對數據的處理。

二、把握設計

理解了該庫設計的特點，下面從源碼目錄、抽象接口及核心設計原理三個層面對Axios進行整體的把握。

2.1 源碼目錄

如下所示是Axios的源碼目錄及各個文件的作用

2.2 抽象接口

對源碼的目錄有了一定了解，下面利用UML類圖對該系統各個模塊的依賴關系進一步了解，為后續源碼分析打好基礎。(看該圖注意對著源碼一起看)

2.3 設計原理

首先看一段代碼，這段代碼的執行順序包含著Axios的核心原理。

axios.defaults.baseURL = 'http://localhost:8080' 
 
// 請求攔截器一 
axios.interceptors.request.use( 
    config => { 
        console.log('請求攔截器一', config); 
        return config; 
    }, 
    error => { 
        console.log('request interceptor rejected1'); 
        return Promise.reject(error); 
    } 
); 
 
// 請求攔截器二 
axios.interceptors.request.use( 
    config => { 
        console.log('請求攔截器二', config); 
        return config; 
    }, 
    error => { 
        console.log('request interceptor rejected2'); 
        return Promise.reject(error); 
    } 
); 
 
// 響應攔截器一 
axios.interceptors.response.use( 
    response => { 
        console.log('響應攔截器一', response); 
        return response; 
    }, 
    error => { 
        console.log('response interceptor rejected1'); 
        return Promise.reject(error); 
    } 
); 
 
// 響應攔截器二 
axios.interceptors.response.use( 
    response => { 
        console.log('響應攔截器二', response); 
        return response; 
    }, 
    error => { 
        console.log('response interceptor rejected2'); 
        return Promise.reject(error); 
    } 
); 
 
axios('/', { 
    method: 'post', 
    headers: { 
        'Content-Type': 'application/json' 
    }, 
    data: { 
        test: 'test' 
    }, 
    // 請求轉換器 
    transformRequest: [(data, headers) => { 
        console.log('請求轉換器', data); 
        return JSON.stringify(data) 
    }], 
    // 響應轉換器 
    transformResponse: [(response, headers) => { 
        console.log('響應轉換器', response); 
        return response; 
    }] 
}) 
.then((response) => { 
    console.log(response.data) 
})

寫了這么多代碼，大家肯定對這段代碼的執行結果很感興趣，為了滿足各位看客的好奇心，下面就直接拋出來這段結果。

不過單看執行結果也不能了解其核心設計原理呀，老鐵別急，其實小小代碼就已經包含了Axios的整個執行過程，通過觀察結果及代碼可以將整個過程簡化為下圖：

其核心原理就是這個嗎?是的，你沒有看錯，這就是Axios的核心設計原理，通過一系列鏈式的處理就能夠得到所需要的結果。

三、體會細節

宏觀的事聊完了，下面就詳細聊幾個核心細節吧：整個流程、請求/響應攔截器、dispatchRequest是個啥、請求/響應數據轉換器。

3.1 整體運行流程

在第二章中闡述了該核心原理，老鐵們一定對該整體是如何運轉起來的很感興趣吧，下面就來解答各位老鐵的疑惑——Axios

function Axios(instanceConfig) { 
  this.defaults = instanceConfig; 
  // 攔截器實例化 
  this.interceptors = { 
    request: new InterceptorManager(), 
    response: new InterceptorManager() 
  }; 
} 
 
// 通過一系列的繼承綁定操作，該函數其實就是axios函數 
Axios.prototype.request = function request(config) { 
  // …… 
  config = mergeConfig(this.defaults, config); 
 
  // Set config.method 
  // …… 
 
  // ****核心**** 
  // 存儲該調用鏈的數組 
  var chain = [dispatchRequest, undefined]; 
  var promise = Promise.resolve(config); 
 
  // 將請求攔截器的內容塞到數組前面（注意用的unshift函數，這就很好的解釋了為什么先調用的請求攔截器后執行） 
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) { 
    chain.unshift(interceptor.fulfilled, interceptor.rejected); 
  }); 
  // 將響應攔截器的內容塞到數組后面 
  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) { 
    chain.push(interceptor.fulfilled, interceptor.rejected); 
  }); 
   
  // 利用Promise將整個數組中的內容串起來，這樣就可以按照順序鏈式執行了 
  while (chain.length) { 
    promise = promise.then(chain.shift(), chain.shift()); 
  } 
 
  return promise; 
};

是不是很巧妙?通過利用數組先來存儲需要的內容，先處理的在數組的前面(請求攔截器)，后處理的在數組的后面(響應攔截器)，然后利用Promise將整個內容串起來，很好的處理網絡請求屬于異步的問題——Perfect。

3.2 請求/響應攔截器

通過觀察第二部分的執行結果我們已經了解了請求/響應攔截器，下面就做一下總結：

請求攔截器就是在發送請求前執行的回調函數，個人認為其最大功用就是對多個請求的配置進行統一修改
仔細觀察發現請求攔截器1先加入但是后執行，是不是與整體運行流程中的代碼對上了。
響應攔截器就是在請求得到響應后執行的回調函數，成功回調的參數就是響應response，其可以對多個請求的響應進行統一修改。

先拋出請求/響應攔截器的核心代碼

function InterceptorManager() { 
  this.handlers = []; 
} 
 
// 注冊攔截器 
InterceptorManager.prototype.use = function use(fulfilled, rejected) { 
  this.handlers.push({ 
    fulfilled: fulfilled, 
    rejected: rejected 
  }); 
  return this.handlers.length - 1; 
}; 
 
// 刪除攔截器 
InterceptorManager.prototype.eject = function eject(id) { 
  if (this.handlers[id]) { 
    this.handlers[id] = null; 
  } 
}; 
 
// 對攔截器進行分發 
InterceptorManager.prototype.forEach = function forEach(fn) { 
  utils.forEach(this.handlers, function forEachHandler(h) { 
    if (h !== null) { 
      fn(h); 
    } 
  }); 
};

看看攔截器的核心源碼，是不是發現與一種設計模式很像?對的，就是觀察者模式。當調用use方法的時候就會將回調函數(成功、失敗)保存至handlers屬性上，方便后期的調用;當調用eject方法的時候就會刪除對應索引位置回調函數;當調用forEach方法的時候就會就會對handlers屬性(存儲的攔截器回調)中的內容進行分發。

3.3 dispatchRequest是個啥

前面聊了整個請求的請求前(請求攔截器)和請求后(響應攔截器)，是不是感覺少點東西，如何發請求，這就是我們本次要與大家一起嘮的dispatchRequest(config)。

module.exports = function dispatchRequest(config) { 
  // …… 
 
  //請求數據轉換 
  config.data = transformData( 
    config.data, 
    config.headers, 
    config.transformRequest 
  ); 
  // …… 
   
  // 獲取適配器：自己配置了就選自己的，自己沒有設置就選默認的（瀏覽器端就選xhrAdapter、node端就選httpAdapter；這也就是為什么Axios即支持瀏覽器又支持Node的原因） 
  var adapter = config.adapter || defaults.adapter; 
 
  return adapter(config).then(function onAdapterResolution(response) { 
    // …… 
 
    // 響應數據轉換器 
    response.data = transformData( 
      response.data, 
      response.headers, 
      config.transformResponse 
    ); 
 
    return response; 
  }, function onAdapterRejection(reason) { 
    if (!isCancel(reason)) { 
      // …… 
 
      // 響應數據轉換器 
      if (reason && reason.response) { 
        reason.response.data = transformData( 
          reason.response.data, 
          reason.response.headers, 
          config.transformResponse 
        ); 
      } 
    } 
 
    return Promise.reject(reason); 
  }); 
};

通過觀察整個請求流程中的中間環節——dispatchRequest，它一共做了三件事：

調用請求數據轉換器轉換請求數據
選擇合適的適配器發起請求——自己配置了就選自己的，自己沒有配置就選默認的(瀏覽器端就選xhrAdapter、node端就選httpAdapter;這也就是為什么Axios即支持瀏覽器又支持Node的原因)
當請求數據返回后，調用響應數據轉換器轉換響應數據

3.4 請求/響應數據轉換器

既然3.3中提到了請求/響應轉換器，本節就來聊一聊它倆。

// 核心源碼 
module.exports = function transformData(data, headers, fns) { 
  utils.forEach(fns, function transform(fn) { 
    data = fn(data, headers); 
  }); 
 
  return data; 
};

請求數據轉換調用，實質上就是利用請求數據轉換器對請求頭和請求數據進行特定的處理(transformRequest為處理函數的數組，defaults中包含默認的配置)

config.data = transformData( 
  config.data, 
  config.headers, 
  config.transformRequest 
);

響應數據轉換調用類似于請求數據轉換調用,對響應體進行一系列的處理(transformResponse為處理函數的數組，defaults中包含默認的配置)

response.data = transformData( 
  response.data, 
  response.headers, 
  config.transformResponse 
);

四、結語

上述三章對Axios進行整體的分析，從Axios的特點、整體設計及關鍵環節三個方面進行了講述，通過閱讀源碼學到了很多知識，也能夠更加熟練的使用Axios。為了保證各位老鐵的學習Axios源碼的效果，對學習Axios源碼的兩條建議：

邊閱讀本文邊看源碼，能夠有更深入的理解。

不要糾結于具體的實現，從宏觀的角度去看源碼，這樣能夠節省大量時間。

責任編輯：武曉燕來源：前端點線面

Axios 源碼流程