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)！
