一、關(guān)鍵步驟

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

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

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

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

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

2.請求

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

二、Axios類

1.基礎(chǔ)屬性

axios類型的對象，存在2個基礎(chǔ)屬性

• defaults：默認(rèn)的請求參數(shù)
• interceptors：請求和響應(yīng)的攔截器

2.輔助方法

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

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

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

3.request方法

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

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

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

• (2)處理headers

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

• (3)運(yùn)行執(zhí)行隊列

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

• 異步模式

• 同步模式

簡單來說，就是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對象。請求配置中，甚至可以讓我們自己去實(shí)現(xiàn)自己的適配器。

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

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

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

1.xhradpter

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

2.httpadpter

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

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

最新評論