一、關(guān)鍵步驟

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

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

function createInstance(defaultConfig) {
  // 傳入默認(rèn)配置生成axios對(duì)象
  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對(duì)象
  instance.create = function create(instanceConfig) {
    return createInstance(mergeConfig(defaultConfig, instanceConfig));
  };

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

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

2.請(qǐng)求

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

二、Axios類

1.基礎(chǔ)屬性

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

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

2.輔助方法

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

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

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

3.request方法

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

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

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

• (2)處理headers

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

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

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

• 異步模式

• 同步模式

簡(jiǎn)單來(lái)說(shuō)，就是request攔截器，request請(qǐng)求，response攔截器一起組成了一個(gè)執(zhí)行隊(duì)列。在異步模式下，隊(duì)列里面每一個(gè)執(zhí)行方法執(zhí)行完成之后，會(huì)繼續(xù)調(diào)用下一個(gè)執(zhí)行方法。同步模式下，request攔截器和request請(qǐng)求會(huì)按順序同步執(zhí)行，但response攔截器會(huì)在請(qǐng)求返回后異步執(zhí)行。

三、adpter適配器

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

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

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

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

1.xhradpter

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

2.httpadpter

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

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

最新評(píng)論