建站
咨詢
售后
建站咨詢
新聞中心
[[421684]]
一、領(lǐng)悟思想
Axios是一個(gè)基于Promise的HTTP庫，根據(jù)官網(wǎng)介紹，有以下幾個(gè)特點(diǎn)：
- 在瀏覽器端會(huì)創(chuàng)建XMLHttpRequests
- 在Node端會(huì)創(chuàng)建HTTP請(qǐng)求
- 由于Axios是一個(gè)基于Promise的HTTP庫，所以其支持Promise API
- 支持請(qǐng)求和響應(yīng)攔截器
- 支持請(qǐng)求和響應(yīng)數(shù)據(jù)轉(zhuǎn)換
- 支持取消請(qǐng)求
- 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
- 客戶端支持防御XSRF攻擊
通過上述官網(wǎng)介紹的特點(diǎn)，我認(rèn)為其突出的優(yōu)點(diǎn)有三個(gè)：
- 支持Promise API，可以方便進(jìn)行鏈?zhǔn)秸{(diào)用;
- 支持請(qǐng)求和響應(yīng)攔截器，該攔截器將Node中中間件思想引入該庫，在請(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ì)
理解了該庫設(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é)果很感興趣，為了滿足各位看客的好奇心，下面就直接拋出來這段結(jié)果。
不過單看執(zhí)行結(jié)果也不能了解其核心設(shè)計(jì)原理呀，老鐵別急，其實(shí)小小代碼就已經(jīng)包含了Axios的整個(gè)執(zhí)行過程，通過觀察結(jié)果及代碼可以將整個(gè)過程簡(jiǎn)化為下圖：
其核心原理就是這個(gè)嗎?是的，你沒有看錯(cuò)，這就是Axios的核心設(shè)計(jì)原理，通過一系列鏈?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)起來的很感興趣吧，下面就來解答各位老鐵的疑惑——Axios
- function Axios(instanceConfig) {
- this.defaults = instanceConfig;
- // 攔截器實(shí)例化
- this.interceptors = {
- request: new InterceptorManager(),
- response: new InterceptorManager()
- };
- }
- // 通過一系列的繼承綁定操作，該函數(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)容串起來，這樣就可以按照順序鏈?zhǔn)綀?zhí)行了
- while (chain.length) {
- promise = promise.then(chain.shift(), chain.shift());
- }
- return promise;
- };
是不是很巧妙?通過利用數(shù)組先來存儲(chǔ)需要的內(nèi)容，先處理的在數(shù)組的前面(請(qǐng)求攔截器)，后處理的在數(shù)組的后面(響應(yīng)攔截器)，然后利用Promise將整個(gè)內(nèi)容串起來，很好的處理網(wǎng)絡(luò)請(qǐng)求屬于異步的問題——Perfect。
3.2 請(qǐng)求/響應(yīng)攔截器
通過觀察第二部分的執(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
- );
- // ……
- // 獲取適配器：自己配置了就選自己的，自己沒有設(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);
- });
- };
通過觀察整個(gè)請(qǐng)求流程中的中間環(huán)節(jié)——dispatchRequest，它一共做了三件事：
- 調(diào)用請(qǐng)求數(shù)據(jù)轉(zhuǎn)換器轉(zhuǎn)換請(qǐng)求數(shù)據(jù)
- 選擇合適的適配器發(fā)起請(qǐng)求——自己配置了就選自己的，自己沒有配置就選默認(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é)就來聊一聊它倆。
- // 核心源碼
- 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é)語
上述三章對(duì)Axios進(jìn)行整體的分析，從Axios的特點(diǎn)、整體設(shè)計(jì)及關(guān)鍵環(huán)節(jié)三個(gè)方面進(jìn)行了講述，通過閱讀源碼學(xué)到了很多知識(shí)，也能夠更加熟練的使用Axios。為了保證各位老鐵的學(xué)習(xí)Axios源碼的效果，對(duì)學(xué)習(xí)Axios源碼的兩條建議：
邊閱讀本文邊看源碼，能夠有更深入的理解。
不要糾結(jié)于具體的實(shí)現(xiàn)，從宏觀的角度去看源碼，這樣能夠節(jié)省大量時(shí)間。
分享文章：三步法解析Axios源碼
鏈接URL：http://www.dlmjj.cn/article/dhsccjc.html
