一、關鍵步驟

1.創(chuàng)建axios對象

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

function createInstance(defaultConfig) {
  // 傳入默認配置生成axios對象
  const context = new Axios(defaultConfig);
  // 本質(zhì)是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工廠方法供外部創(chuàng)建自定義的axios對象
  instance.create = function create(instanceConfig) {
    return createInstance(mergeConfig(defaultConfig, instanceConfig));
  };

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

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

2.請求

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

二、Axios類

1.基礎屬性

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

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

2.輔助方法

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

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

這些方法本質(zhì)上都是request的封裝，調(diào)用這些方法時，都會調(diào)用request方法，但相應的會預設置部分請求參數(shù)，如method和headers

3.request方法

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

• (1)參數(shù)合并

axios對象在創(chuàng)建時，會傳入一個默認請求配置對象，這個對象會和請求時傳入的請求配置對象進行合并。

• (2)處理headers

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

• (3)運行執(zhí)行隊列

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

• 異步模式

• 同步模式

簡單來說，就是request攔截器，request請求，response攔截器一起組成了一個執(zhí)行隊列。在異步模式下，隊列里面每一個執(zhí)行方法執(zhí)行完成之后，會繼續(xù)調(diào)用下一個執(zhí)行方法。同步模式下，request攔截器和request請求會按順序同步執(zhí)行，但response攔截器會在請求返回后異步執(zhí)行。

三、adpter適配器

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

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

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

如果提供了這么一個參數(shù)，那么將不會采用默認的適配器，一般供測試使用。

1.xhradpter

xhradpter適配器適用于web環(huán)境，利用XMLHttpRequest對象實現(xiàn)。本質(zhì)上就是在操作一個XMLHttpRequest對象。

2.httpadpter

httpadpter適配器適用于node環(huán)境，利用node原生的http模塊實現(xiàn)。

以上就是axios庫的核心代碼解析及總結的詳細內(nèi)容，更多關于axios庫核心代碼的資料請關注腳本之家其它相關文章！

最新評論