AJax
概念:Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。是一種網(wǎng)絡(luò)請(qǐng)求的概念框架。
主要特點(diǎn):實(shí)現(xiàn)頁(yè)面局部刷新,主要使用js的XMLHttpRequest請(qǐng)求實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求。
主要缺點(diǎn):使用函數(shù)回調(diào)的方式實(shí)現(xiàn)異步請(qǐng)求,若請(qǐng)求里寫(xiě)請(qǐng)求將會(huì)導(dǎo)致回調(diào)地獄的發(fā)生。
示例代碼:
<body>
<script>
function ajax(url) {
const xhr = new XMLHttpRequest();
xhr.open("get", url, false);
//異步函數(shù)監(jiān)聽(tīng)
xhr.onreadystatechange = function () {
// 異步回調(diào)函數(shù)
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.info("響應(yīng)結(jié)果", xhr.response)
}
}
}
xhr.send(null);
}
ajax('https://smallpig.site/api/category/getCategory')
</script>
</body>
Fetch
概念:使用ES6中提出的promise實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求是Ajax的替代品,是真實(shí)存在的請(qǐng)求API。不是對(duì)Ajax的封裝。
代碼:
<script>
function ajaxFetch(url) {
fetch(url).then(res => res.json()).then(data => {
console.info(data)
})
}
ajaxFetch('https://smallpig.site/api/category/getCategory')
</script>
主要特點(diǎn):
- 使用promise的方式進(jìn)行網(wǎng)絡(luò)請(qǐng)求,支持async / await;
- 采用模塊化請(qǐng)求,語(yǔ)法簡(jiǎn)潔更加語(yǔ)義化,例如Request 、 Response,可讀性較好;
- 脫離XHR,采用新的實(shí)現(xiàn)方式。
主要缺點(diǎn):
- 只對(duì)網(wǎng)絡(luò)請(qǐng)求錯(cuò)誤進(jìn)行reject,而對(duì)服務(wù)器返回的400或者500 都會(huì)被當(dāng)做成功的請(qǐng)求;
- 不支持終端和超時(shí)處理,造成資源流量的浪費(fèi);
- 沒(méi)辦法監(jiān)聽(tīng)請(qǐng)求的進(jìn)度;
- 默認(rèn)不會(huì)帶cookie,需要手動(dòng)添加配置;
Axios
概念:它是一個(gè)基于XHR二次進(jìn)行封裝的HTTP請(qǐng)求庫(kù);
代碼:
// 發(fā)送 POST 請(qǐng)求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
主要特點(diǎn):文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-852366.html
- 瀏覽器端發(fā)起XMLHTTPRequest請(qǐng)求;
- node端發(fā)起http請(qǐng)求;
- 可進(jìn)行請(qǐng)求終端;
- 可監(jiān)聽(tīng)請(qǐng)求和返回;
- 支持Promise API;
- 可中斷請(qǐng)求;
- 可自動(dòng)轉(zhuǎn)換json格式
- 客戶端支持轉(zhuǎn)換XSRF攻擊;
- axios和vue沒(méi)關(guān)系,axios也不是隨著Vue的興起才廣泛使用的,axios本身就是獨(dú)立的請(qǐng)求庫(kù),跟用什么框架沒(méi)關(guān)系;而且最初Vue官方推薦的請(qǐng)求庫(kù)是vue-resouce,后來(lái)才推薦的axios;
- axios不是xhr的子集,axios利用xhr進(jìn)行了二次封裝的請(qǐng)求庫(kù),xhr只是axios中的其中一個(gè)請(qǐng)求適配器,axios在nodejs端還有個(gè)http的請(qǐng)求適配器;axios = xhr + http
注意??
axios和vue是沒(méi)關(guān)系的,它并不是隨著vue的興起而被廣泛使用的,而是axios本身就是一個(gè)獨(dú)立的請(qǐng)求庫(kù),跟使用的框架并沒(méi)有關(guān)系;最初vue官方推薦的請(qǐng)求庫(kù)是vue-resouce,后來(lái)才推薦使用axios;axios是利用了xhr進(jìn)行的二次封裝庫(kù),xhr只是其中的一個(gè)http請(qǐng)求適配器;Axios = XHR + HTTP;文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-852366.html
到了這里,關(guān)于Ajax、Fetch、Axios三者的區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!