01
前言
眾所周知在前后分離的背景下,一款優(yōu)秀的網(wǎng)絡(luò)請(qǐng)求庫(kù)是多么的重要,axios 現(xiàn)在幾乎已經(jīng)是一個(gè)項(xiàng)目開(kāi)發(fā)的標(biāo)配了,無(wú)論是從vue 還是到 react 都可以看到它的身影。可以看出這個(gè)庫(kù)的受歡迎程度。
這兩篇文章我們看一下 axios 的相關(guān)知識(shí)。從 import axios from 'axios' 再到 axios 的內(nèi)部源碼,帶大家看一下經(jīng)典庫(kù)的運(yùn)行流程。
相信大家認(rèn)真讀完之后肯定會(huì)有所收獲。
為了能幫助更多人學(xué)習(xí),如果有需要的可以加我的好友邀請(qǐng)你進(jìn)入前端學(xué)習(xí)交流微信群。
02
功能概覽
以下內(nèi)容來(lái)自 axios 官方
- Make XMLHttpRequests from the browser
- Make http requests from node.js
- Supports the Promise API
- Intercept request and response
- Transform request and response data
- Cancel requests
- Automatic transforms for JSON data
- Client side support for protecting against XSRF
03
**基本使用及問(wèn)題思考
**
這里我們假定您已經(jīng)創(chuàng)建好了一個(gè)項(xiàng)目并且成功引入了 axios 依賴。
下面我們看一下在使用的 axios的時(shí)候一些步驟:
1、引入 axios 如下:
import axios from 'axios'
這行代碼背后做了什么?
我們稍后再來(lái)說(shuō)
2、使用 axios
// 使用方式一
axios({
url: xxxx,
data: {}
}).then(res => {})
// 使用方式二
axios.[get|post|put]({
url: xxxx,
data: {}
}).then(res => {})
// 使用方式三
axios.request({
url: xxxx,
data: {}
}).then(res => {})
從上面的代碼可以看出 axios 的使用方式可以說(shuō)是有很多種,而且配置也比較完善,我們引入的 axios 即可以直接調(diào)用,又可以以對(duì)象的方式調(diào)用其它方法。
那么axios到底是怎么做到的?稍后我們也會(huì)進(jìn)行講解。
3、最后再來(lái)看一下我個(gè)人認(rèn)為 axios 最優(yōu)秀的地方,執(zhí)行鏈、攔截器是怎么運(yùn)行的,運(yùn)行的流程是是怎么樣的。
下面我們一一解答,可以本篇文件講解不完,我會(huì)分成兩篇文章進(jìn)行說(shuō)明。
04
**import axios from 'axios'背后做了什么
**
要了解這個(gè)問(wèn)題,首先要知道 js 模塊化背后做了什么。
我們平時(shí)安裝的一些第三方依賴庫(kù)在我們 npm i 或者 npm install 之后都會(huì)被放到項(xiàng)目的 node_modules 文件夾下面。里面的內(nèi)容是非常非常多的,因?yàn)椴粌H僅是我們項(xiàng)目所需要依賴,還有依賴所需要依賴……直到把所有的依賴都加載完成之后才算完成。
當(dāng)打包工具執(zhí)行到 import axios from 'axios' 這行代碼之后,他會(huì)從 node_modules里面尋找 axios 目錄,如果沒(méi)有則報(bào)錯(cuò):找不到依賴,讓你進(jìn)行安裝。
如果已經(jīng)找到 axios 目錄,則會(huì)繼續(xù)找到該目錄下面的 package.json 清單文件。內(nèi)容如下(版本不同,內(nèi)容可能也會(huì)不同,不過(guò)大同小異)
在加載完 package.json之后,會(huì)找到 "main":"index.js" 這行配置。并且會(huì)認(rèn)定 "index.js" 為入口文件。執(zhí)行里面的代碼,如下:
從上面代碼可以看出,最后又加加載執(zhí)行 ./lib/axios
文件中的代碼。在加載 文件中的代碼時(shí)會(huì)找到默認(rèn)導(dǎo)出,如下:
至些,我們 import axios from 'axios' 背后的基本操作說(shuō)完了,最后找到了
'/lib/axios'中的 module.exports = axios 這行代碼,拿到 axios 實(shí)例。
05
axios實(shí)例倒底是什么
從上面我們簡(jiǎn)單的分析出 import axios from 'axios' 獲取實(shí)例的過(guò)程。然后就開(kāi)始使用,但是有些朋友會(huì)有疑問(wèn),為什么 axios 即能當(dāng)方法調(diào)用也可以當(dāng)對(duì)象調(diào)用其方法屬性,非常靈活也非常方便。這背后是怎么做的?我們繼續(xù)分析
lib/axios
文件中暴露出一個(gè)默認(rèn)的實(shí)例對(duì)象 axios
。如下:
module.exports = axios;
看一下這個(gè)對(duì)象的定義:
// Create the default instance to be exported
var axios = createInstance(defaults);
是由一個(gè)方法生成,繼續(xù)看這個(gè) createInstance
函數(shù)
function createInstance(defaultConfig) {
var context = new Axios(defaultConfig);
var instance = bind(Axios.prototype.request, context);
// Copy axios.prototype to instance
utils.extend(instance, Axios.prototype, context);
// Copy context to instance
utils.extend(instance, context);
return instance;
}
我們重點(diǎn)看一下:
var instance = bind(Axios.prototype.request, context);
instance實(shí)例由bind函數(shù)返回,bind函數(shù)內(nèi)容如下:
module.exports = function bind(fn, thisArg) {
return function wrap() {
var args = new Array(arguments.length);
for (var i = 0; i < args.length; i++) {
args[i] = arguments[i];
}
return fn.apply(thisArg, args);
};
};
到這里我們就應(yīng)該能看明白 bind 函數(shù)返回了一個(gè)名字叫 wrap的函數(shù)。也就是說(shuō)上面的 instance 其實(shí)就是一個(gè) 函數(shù),這樣一步步的返回最終 lib/axios 默認(rèn)導(dǎo)出的就是一個(gè)函數(shù)類型的數(shù)據(jù)。
這也就說(shuō)明了為什么 import axios from 'axios' 之后 我們可以直接當(dāng)函數(shù)進(jìn)行調(diào)用。因?yàn)槟J(rèn)的 axios 本身就是函數(shù)肯定可以直接調(diào)用。
那問(wèn)題又來(lái)了,為什么 axios 還可以當(dāng)成對(duì)象那樣可以調(diào)用某些屬性方法呢?
那就要看下 createInstance函數(shù)中的兩行行代碼了:
// Copy axios.prototype to instance
utils.extend(instance, Axios.prototype, context);
// Copy context to instance
utils.extend(instance, context);
這里涉及到了原型鏈的一些知識(shí)。可以理解成把 Axios.prototype 中的方法分配給了 instance 函數(shù)對(duì)象中,具體的過(guò)程如下:
function extend(a, b, thisArg) {
forEach(b, function assignValue(val, key) {
if (thisArg && typeof val === 'function') {
a[key] = bind(val, thisArg);
} else {
a[key] = val;
}
});
return a;
}
被分配方法有:
['post', 'put', 'patch']
['delete', 'get', 'head', 'options']
['request', 'getUri']
所以我們就可以像:axios.get 或者 axios.post 這樣調(diào)用了。
到目錄為止我們基本已經(jīng)梳理清楚了axios的加載過(guò)程,和基本的用法。
-
內(nèi)部
+關(guān)注
關(guān)注
0文章
9瀏覽量
18960 -
運(yùn)行
+關(guān)注
關(guān)注
0文章
25瀏覽量
15556 -
源碼
+關(guān)注
關(guān)注
8文章
668瀏覽量
30167
發(fā)布評(píng)論請(qǐng)先 登錄
鴻蒙開(kāi)發(fā)實(shí)戰(zhàn):網(wǎng)絡(luò)請(qǐng)求庫(kù)【axios】

鴻蒙OS開(kāi)發(fā)實(shí)例:【工具類封裝-首選項(xiàng)本地存儲(chǔ)】

【米爾-全志T113-i開(kāi)發(fā)板試用】5、編寫(xiě)系統(tǒng)信息顯示的Web頁(yè)面組件
openharmony import文件的源碼在哪個(gè)位置?
網(wǎng)絡(luò)組件axios可以在OpenHarmony上使用了
51單片機(jī)接收ASCII碼并實(shí)現(xiàn)1602顯示

51單片機(jī)在無(wú)源蜂鳴器上循環(huán)演奏低音“DO、RE、MI、FA、SO、LA、SI”這7個(gè)音調(diào)。

LSTM GRU Bidirectional-LSTM股票預(yù)測(cè)

Python報(bào)錯(cuò):ImportError cannot import name &apos;imresize&apos;解決方法
if(a==1 &amp;&amp; a==2 &amp;&amp; a==3),為true,你敢信?

OpenHarmony:使用網(wǎng)絡(luò)組件axios與Spring Boot進(jìn)行前后端交互

鴻蒙OS封裝【axios 網(wǎng)絡(luò)請(qǐng)求】(類似Android的Okhttp3)
鴻蒙OS開(kāi)發(fā)實(shí)例:【工具類封裝-頁(yè)面路由】

評(píng)論