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