建站
咨詢
售后
建站咨詢
新聞中心
一、領(lǐng)悟思想
- 在瀏覽器端會(huì)創(chuàng)建XMLHttpRequests
- 在Node端會(huì)創(chuàng)建HTTP請(qǐng)求
- 由于Axios是一個(gè)基于Promise的HTTP庫(kù)，所以其支持Promise API
- 支持請(qǐng)求和響應(yīng)攔截器
- 支持請(qǐng)求和響應(yīng)數(shù)據(jù)轉(zhuǎn)換
- 支持取消請(qǐng)求
- 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
- 客戶端支持防御XSRF攻擊
通過(guò)上述官網(wǎng)介紹的特點(diǎn)，我認(rèn)為其突出的優(yōu)點(diǎn)有三個(gè)：
公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)建站推出寶山免費(fèi)做網(wǎng)站回饋大家。
- 支持Promise API，可以方便進(jìn)行鏈?zhǔn)秸{(diào)用;
- 支持請(qǐng)求和響應(yīng)攔截器，該攔截器將Node中中間件思想引入該庫(kù)，在請(qǐng)求發(fā)送之前和響應(yīng)接收之后可以對(duì)其進(jìn)行處理。
- 支持?jǐn)?shù)據(jù)轉(zhuǎn)換器，轉(zhuǎn)換器主要負(fù)責(zé)數(shù)據(jù)發(fā)送前以及響應(yīng)接收后對(duì)數(shù)據(jù)的處理。
二、把握設(shè)計(jì)
理解了該庫(kù)設(shè)計(jì)的特點(diǎn)，下面從源碼目錄、抽象接口及核心設(shè)計(jì)原理三個(gè)層面對(duì)Axios進(jìn)行整體的把握。
2.1 源碼目錄
如下所示是Axios的源碼目錄及各個(gè)文件的作用
2.2 抽象接口
對(duì)源碼的目錄有了一定了解，下面利用UML類圖對(duì)該系統(tǒng)各個(gè)模塊的依賴關(guān)系進(jìn)一步了解，為后續(xù)源碼分析打好基礎(chǔ)。(看該圖注意對(duì)著源碼一起看)
2.3 設(shè)計(jì)原理
首先看一段代碼，這段代碼的執(zhí)行順序包含著Axios的核心原理。
axios.defaults.baseURL = 'http://localhost:8080'
// 請(qǐng)求攔截器一
axios.interceptors.request.use(
config => {
console.log('請(qǐng)求攔截器一', config);
return config;
},
error => {
console.log('request interceptor rejected1');
return Promise.reject(error);
}
);
// 請(qǐng)求攔截器二
axios.interceptors.request.use(
config => {
console.log('請(qǐng)求攔截器二', config);
return config;
},
error => {
console.log('request interceptor rejected2');
return Promise.reject(error);
}
);
// 響應(yīng)攔截器一
axios.interceptors.response.use(
response => {
console.log('響應(yīng)攔截器一', response);
return response;
},
error => {
console.log('response interceptor rejected1');
return Promise.reject(error);
}
);
// 響應(yīng)攔截器二
axios.interceptors.response.use(
response => {
console.log('響應(yīng)攔截器二', response);
return response;
},
error => {
console.log('response interceptor rejected2');
return Promise.reject(error);
}
);
axios('/', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
data: {
test: 'test'
},
// 請(qǐng)求轉(zhuǎn)換器
transformRequest: [(data, headers) => {
console.log('請(qǐng)求轉(zhuǎn)換器', data);
return JSON.stringify(data)
}],
// 響應(yīng)轉(zhuǎn)換器
transformResponse: [(response, headers) => {
console.log('響應(yīng)轉(zhuǎn)換器', response);
return response;
}]
})
.then((response) => {
console.log(response.data)
})
寫了這么多代碼，大家肯定對(duì)這段代碼的執(zhí)行結(jié)果很感興趣，為了滿足各位看客的好奇心，下面就直接拋出來(lái)這段結(jié)果。
不過(guò)單看執(zhí)行結(jié)果也不能了解其核心設(shè)計(jì)原理呀，老鐵別急，其實(shí)小小代碼就已經(jīng)包含了Axios的整個(gè)執(zhí)行過(guò)程，通過(guò)觀察結(jié)果及代碼可以將整個(gè)過(guò)程簡(jiǎn)化為下圖：
其核心原理就是這個(gè)嗎?是的，你沒(méi)有看錯(cuò)，這就是Axios的核心設(shè)計(jì)原理，通過(guò)一系列鏈?zhǔn)降奶幚砭湍軌虻玫剿枰慕Y(jié)果。
三、體會(huì)細(xì)節(jié)
宏觀的事聊完了，下面就詳細(xì)聊幾個(gè)核心細(xì)節(jié)吧：整個(gè)流程、請(qǐng)求/響應(yīng)攔截器、dispatchRequest是個(gè)啥、請(qǐng)求/響應(yīng)數(shù)據(jù)轉(zhuǎn)換器。
3.1 整體運(yùn)行流程
在第二章中闡述了該核心原理，老鐵們一定對(duì)該整體是如何運(yùn)轉(zhuǎn)起來(lái)的很感興趣吧，下面就來(lái)解答各位老鐵的疑惑——Axios
function Axios(instanceConfig) {
this.defaults = instanceConfig;
// 攔截器實(shí)例化
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager()
};
}
// 通過(guò)一系列的繼承綁定操作，該函數(shù)其實(shí)就是axios函數(shù)
Axios.prototype.request = function request(config) {
// ……
config = mergeConfig(this.defaults, config);
// Set config.method
// ……
// ****核心****
// 存儲(chǔ)該調(diào)用鏈的數(shù)組
var chain = [dispatchRequest, undefined];
var promise = Promise.resolve(config);
// 將請(qǐng)求攔截器的內(nèi)容塞到數(shù)組前面（注意用的unshift函數(shù)，這就很好的解釋了為什么先調(diào)用的請(qǐng)求攔截器后執(zhí)行）
this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
chain.unshift(interceptor.fulfilled, interceptor.rejected);
});
// 將響應(yīng)攔截器的內(nèi)容塞到數(shù)組后面
this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
chain.push(interceptor.fulfilled, interceptor.rejected);
});
// 利用Promise將整個(gè)數(shù)組中的內(nèi)容串起來(lái)，這樣就可以按照順序鏈?zhǔn)綀?zhí)行了
while (chain.length) {
promise = promise.then(chain.shift(), chain.shift());
}
return promise;
};是不是很巧妙?通過(guò)利用數(shù)組先來(lái)存儲(chǔ)需要的內(nèi)容，先處理的在數(shù)組的前面(請(qǐng)求攔截器)，后處理的在數(shù)組的后面(響應(yīng)攔截器)，然后利用Promise將整個(gè)內(nèi)容串起來(lái)，很好的處理網(wǎng)絡(luò)請(qǐng)求屬于異步的問(wèn)題——Perfect。
3.2 請(qǐng)求/響應(yīng)攔截器
通過(guò)觀察第二部分的執(zhí)行結(jié)果我們已經(jīng)了解了請(qǐng)求/響應(yīng)攔截器，下面就做一下總結(jié)：
- 請(qǐng)求攔截器就是在發(fā)送請(qǐng)求前執(zhí)行的回調(diào)函數(shù)，個(gè)人認(rèn)為其最大功用就是對(duì)多個(gè)請(qǐng)求的配置進(jìn)行統(tǒng)一修改
- 仔細(xì)觀察發(fā)現(xiàn)請(qǐng)求攔截器1先加入但是后執(zhí)行，是不是與整體運(yùn)行流程中的代碼對(duì)上了。
- 響應(yīng)攔截器就是在請(qǐng)求得到響應(yīng)后執(zhí)行的回調(diào)函數(shù)，成功回調(diào)的參數(shù)就是響應(yīng)response，其可以對(duì)多個(gè)請(qǐng)求的響應(yīng)進(jìn)行統(tǒng)一修改。
先拋出請(qǐng)求/響應(yīng)攔截器的核心代碼
function InterceptorManager() {
this.handlers = [];
}
// 注冊(cè)攔截器
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
this.handlers.push({
fulfilled: fulfilled,
rejected: rejected
});
return this.handlers.length - 1;
};
// 刪除攔截器
InterceptorManager.prototype.eject = function eject(id) {
if (this.handlers[id]) {
this.handlers[id] = null;
}
};
// 對(duì)攔截器進(jìn)行分發(fā)
InterceptorManager.prototype.forEach = function forEach(fn) {
utils.forEach(this.handlers, function forEachHandler(h) {
if (h !== null) {
fn(h);
}
});
};看看攔截器的核心源碼，是不是發(fā)現(xiàn)與一種設(shè)計(jì)模式很像?對(duì)的，就是觀察者模式。當(dāng)調(diào)用use方法的時(shí)候就會(huì)將回調(diào)函數(shù)(成功、失敗)保存至handlers屬性上，方便后期的調(diào)用;當(dāng)調(diào)用eject方法的時(shí)候就會(huì)刪除對(duì)應(yīng)索引位置回調(diào)函數(shù);當(dāng)調(diào)用forEach方法的時(shí)候就會(huì)就會(huì)對(duì)handlers屬性(存儲(chǔ)的攔截器回調(diào))中的內(nèi)容進(jìn)行分發(fā)。
3.3 dispatchRequest是個(gè)啥
前面聊了整個(gè)請(qǐng)求的請(qǐng)求前(請(qǐng)求攔截器)和請(qǐng)求后(響應(yīng)攔截器)，是不是感覺少點(diǎn)東西，如何發(fā)請(qǐng)求，這就是我們本次要與大家一起嘮的dispatchRequest(config)。
module.exports = function dispatchRequest(config) {
// ……
//請(qǐng)求數(shù)據(jù)轉(zhuǎn)換
config.data = transformData(
config.data,
config.headers,
config.transformRequest
);
// ……
// 獲取適配器：自己配置了就選自己的，自己沒(méi)有設(shè)置就選默認(rèn)的（瀏覽器端就選xhrAdapter、node端就選httpAdapter；這也就是為什么Axios即支持瀏覽器又支持Node的原因）
var adapter = config.adapter || defaults.adapter;
return adapter(config).then(function onAdapterResolution(response) {
// ……
// 響應(yīng)數(shù)據(jù)轉(zhuǎn)換器
response.data = transformData(
response.data,
response.headers,
config.transformResponse
);
return response;
}, function onAdapterRejection(reason) {
if (!isCancel(reason)) {
// ……
// 響應(yīng)數(shù)據(jù)轉(zhuǎn)換器
if (reason && reason.response) {
reason.response.data = transformData(
reason.response.data,
reason.response.headers,
config.transformResponse
);
}
}
return Promise.reject(reason);
});
};通過(guò)觀察整個(gè)請(qǐng)求流程中的中間環(huán)節(jié)——dispatchRequest，它一共做了三件事：
- 調(diào)用請(qǐng)求數(shù)據(jù)轉(zhuǎn)換器轉(zhuǎn)換請(qǐng)求數(shù)據(jù)
- 選擇合適的適配器發(fā)起請(qǐng)求——自己配置了就選自己的，自己沒(méi)有配置就選默認(rèn)的(瀏覽器端就選xhrAdapter、node端就選httpAdapter;這也就是為什么Axios即支持瀏覽器又支持Node的原因)
- 當(dāng)請(qǐng)求數(shù)據(jù)返回后，調(diào)用響應(yīng)數(shù)據(jù)轉(zhuǎn)換器轉(zhuǎn)換響應(yīng)數(shù)據(jù)
3.4 請(qǐng)求/響應(yīng)數(shù)據(jù)轉(zhuǎn)換器
既然3.3中提到了請(qǐng)求/響應(yīng)轉(zhuǎn)換器，本節(jié)就來(lái)聊一聊它倆。
// 核心源碼
module.exports = function transformData(data, headers, fns) {
utils.forEach(fns, function transform(fn) {
data = fn(data, headers);
});
return data;
};
請(qǐng)求數(shù)據(jù)轉(zhuǎn)換調(diào)用，實(shí)質(zhì)上就是利用請(qǐng)求數(shù)據(jù)轉(zhuǎn)換器對(duì)請(qǐng)求頭和請(qǐng)求數(shù)據(jù)進(jìn)行特定的處理(transformRequest為處理函數(shù)的數(shù)組，defaults中包含默認(rèn)的配置)
config.data = transformData(
config.data,
config.headers,
config.transformRequest
);
響應(yīng)數(shù)據(jù)轉(zhuǎn)換調(diào)用類似于請(qǐng)求數(shù)據(jù)轉(zhuǎn)換調(diào)用,對(duì)響應(yīng)體進(jìn)行一系列的處理(transformResponse為處理函數(shù)的數(shù)組，defaults中包含默認(rèn)的配置)
response.data = transformData(
response.data,
response.headers,
config.transformResponse
);
四、結(jié)語(yǔ)
上述三章對(duì)Axios進(jìn)行整體的分析，從Axios的特點(diǎn)、整體設(shè)計(jì)及關(guān)鍵環(huán)節(jié)三個(gè)方面進(jìn)行了講述，通過(guò)閱讀源碼學(xué)到了很多知識(shí)，也能夠更加熟練的使用Axios。為了保證各位老鐵的學(xué)習(xí)Axios源碼的效果，對(duì)學(xué)習(xí)Axios源碼的兩條建議：
邊閱讀本文邊看源碼，能夠有更深入的理解。
不要糾結(jié)于具體的實(shí)現(xiàn)，從宏觀的角度去看源碼，這樣能夠節(jié)省大量時(shí)間。
本文標(biāo)題：讓我們一起學(xué)習(xí)源碼 Axios
網(wǎng)頁(yè)URL：http://www.dlmjj.cn/article/djcsece.html
