axios庫的核心代碼解析及總結

Posted on by

一、關鍵步驟

1.創建axios對象

axios庫導出的對象是一個已經被創建好的axios對象，它本質上是一個方法，可以直接接收一個config配置參數進行請求。在庫的入口處，即可看到如下代碼：

function createInstance(defaultConfig) {
  // 傳入默認配置生成axios對象
  const context = new Axios(defaultConfig);
  // 本質是request方法，this上下文綁定context
  const instance = bind(Axios.prototype.request, context);
  // 將Axios原型上的屬性復制到instance
  utils.extend(instance, Axios.prototype, context, {allOwnKeys: true});
  // 將context上的屬性復制到instance
  utils.extend(instance, context, {allOwnKeys: true});
  // 暴露create工廠方法供外部創建自定義的axios對象
  instance.create = function create(instanceConfig) {
    return createInstance(mergeConfig(defaultConfig, instanceConfig));
  };

  return instance;
}
// 默認暴露的axios對象
const axios = createInstance(defaults);

上述代碼是創建默認axios對象的流程，這個對象上有Axios類的實例屬性以及原型上的方法，且自身的是一個request方法，整個庫最核心的也就是這個request方法。

2.請求

Axios的原型上存在很多輔助方法，如get，post，put等等，這些方法最終都會調用request方法，且默認設置瞭請求參數中的method屬性，僅僅是一種封裝的快捷調用方式。所以直接使用axios方法(axios的本質是一個方法)，傳入一個合法參數和使用axios.get等方法進行請求沒有區別。

二、Axios類

1.基礎屬性

axios類型的對象，存在2個基礎屬性

  • defaults：默認的請求參數
  • interceptors：請求和響應的攔截器

2.輔助方法

axios類型的對象存在很多輔助方法，如下：

  • delete
  • get
  • head
  • options
  • post
  • put
  • patch
  • postForm
  • patchForm
  • putForm

這些方法本質上都是request的封裝，調用這些方法時，都會調用request方法，但相應的會預設置部分請求參數，如method和headers

3.request方法

這個方法是整個庫的核心，它接收一個配置作為參數。內部流程如下:

  • (1)參數合並

axios對象在創建時，會傳入一個默認請求配置對象，這個對象會和請求時傳入的請求配置對象進行合並。

  • (2)處理headers

合並後的對象需要進一步處理headers，一些headers配置隻針對特定類型的請求，如get類型。

  • (3)運行執行隊列

這一步是整個request設計的較為精妙的地方。執行隊列有2種執行模式，同步模式和異步模式，默認為異步模式。分別如下：

  • 異步模式

  • 同步模式

簡單來說，就是request攔截器，request請求，response攔截器一起組成瞭一個執行隊列。在異步模式下，隊列裡面每一個執行方法執行完成之後，會繼續調用下一個執行方法。同步模式下，request攔截器和request請求會按順序同步執行，但response攔截器會在請求返回後異步執行。

三、adpter適配器

Axios庫是跨平臺的，可以在node環境和web環境同時使用。因此內部有個"適配器"的概念，adpter是一個方法，一個請求本質上就是調用這個方法，方法必須返回一個Promise對象。請求配置中，甚至可以讓我們自己去實現自己的適配器。

// `adapter` 允許自定義處理請求，這使測試更加容易。 // 返回一個 promise 並提供一個有效的響應 （參見 lib/adapters/README.md）。

adapter: function (config) { /* ... */ },

如果提供瞭這麼一個參數，那麼將不會采用默認的適配器，一般供測試使用。

1.xhradpter

xhradpter適配器適用於web環境，利用XMLHttpRequest對象實現。本質上就是在操作一個XMLHttpRequest對象。

2.httpadpter

httpadpter適配器適用於node環境，利用node原生的http模塊實現。

以上就是axios庫的核心代碼解析及總結的詳細內容，更多關於axios庫核心代碼的資料請關註WalkonNet其它相關文章！

推薦閱讀：