一.axios介紹
.axios
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Vue2.0之后,尤雨溪推薦大家用axios替換JQuery ajax,想必讓axios進(jìn)入了很多人的目光中。
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端,本質(zhì)上也是對(duì)原生XHR的封裝宽堆,只不過它是Promise的實(shí)現(xiàn)版本,符合最新的ES規(guī)范茸习,它本身具有以下特征:
1.從瀏覽器中創(chuàng)建 XMLHttpRequest
2.支持 Promise API
3.客戶端支持防止CSRF
4.提供了一些并發(fā)請(qǐng)求的接口(重要畜隶,方便了很多的操作)
5.從 node.js 創(chuàng)建 http 請(qǐng)求
6.攔截請(qǐng)求和響應(yīng)
7.轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
8.取消請(qǐng)求
9.自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
PS:防止CSRF:就是讓你的每個(gè)請(qǐng)求都帶一個(gè)從cookie中拿到的key, 根據(jù)瀏覽器同源策略,假冒的網(wǎng)站是拿不到你cookie中得key的,這樣籽慢,后臺(tái)就可以輕松辨別出這個(gè)請(qǐng)求是否是用戶在假冒網(wǎng)站上的誤導(dǎo)輸入浸遗,從而采取正確的策略。
get請(qǐng)求與post請(qǐng)求的區(qū)別
1.post請(qǐng)求要比get請(qǐng)求更安全
2.post請(qǐng)求比get請(qǐng)求慢,原因: post請(qǐng)求會(huì)向服務(wù)器發(fā)送確認(rèn)請(qǐng)求,服務(wù)器確認(rèn)后才開始發(fā)送數(shù)據(jù),get請(qǐng)求會(huì)直接向服務(wù)發(fā)送數(shù)據(jù),直到服務(wù)器返回確認(rèn)才停止
3.post發(fā)送大數(shù)據(jù)
4.get在瀏覽器回退是是無害的,post會(huì)在次提交請(qǐng)求
5.get請(qǐng)求url地址會(huì)被標(biāo)識(shí)
二.ajax介紹
1.異步j(luò)avascrip和xml(html)的英文縮寫
2.可以在不重新加載網(wǎng)頁的情況下,局部更新網(wǎng)頁的內(nèi)容的技術(shù)
3.可以跟后臺(tái)使用少量的數(shù)據(jù)交換實(shí)現(xiàn)網(wǎng)頁的局部更新
三.原生ajax請(qǐng)求步驟
1.創(chuàng)建異步對(duì)象(使用構(gòu)造函數(shù))
var ajax = new XMLHttpRequest();
2.設(shè)置請(qǐng)求的url參數(shù),可動(dòng)態(tài)傳遞參數(shù)到服務(wù)端
3.發(fā)送請(qǐng)求
4.監(jiān)聽事件監(jiān)聽數(shù)據(jù)什么時(shí)候回來
四,關(guān)于fetch
1.號(hào)稱是ajax的替代品,ES6中出現(xiàn)的,使用了ES6中出現(xiàn)的promise對(duì)象(在解決回調(diào)地獄問題時(shí)使用過)
2.fetch是原生js不是對(duì)ajax的進(jìn)一步封裝,沒有使用XML HttpReques對(duì)象
優(yōu)勢(shì)
1. 語法簡潔嗡综,更加語義化
2. 基于標(biāo)準(zhǔn) Promise 實(shí)現(xiàn)乙帮,支持 async/await
3. 同構(gòu)方便,使用 [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4.更加底層极景,提供的API豐富(request, response)
5.脫離了XHR察净,是ES規(guī)范里新的實(shí)現(xiàn)方式
五,關(guān)于jQuery ajax
傳統(tǒng) Ajax 指的是 XMLHttpRequest(XHR), 最早出現(xiàn)的發(fā)送后端請(qǐng)求技術(shù)盼樟,隸屬于原始js中氢卡,核心使用XMLHttpRequest對(duì)象,多個(gè)請(qǐng)求之間如果有先后關(guān)系的話晨缴,就會(huì)出現(xiàn)回調(diào)地獄译秦。
JQuery ajax 是對(duì)原生XHR的封裝
總結(jié)
1.傳統(tǒng)Ajax 指的是 XMLHttpRequest(XHR),
2.axios和jQuer ajax都是對(duì)Ajax的封裝
3.fetch是原生js在ES6中出現(xiàn)的,使用了promise對(duì)象,號(hào)稱是Ajax的替代品