簡(jiǎn)介
傳統(tǒng)的請(qǐng)求方案是基于原生js的 XMLHttpReauest（XHR） 對(duì)象的，眾所周知庄蹋，ajax 可以實(shí)現(xiàn)無(wú)刷新請(qǐng)求數(shù)據(jù)瞬内，它的出現(xiàn)使前端的技術(shù)上升了一個(gè)臺(tái)階。但是隨著技術(shù)的革新限书，XHR 對(duì)象的弊端也漸漸的暴露出來(lái)虫蝶，直到現(xiàn)在，我們進(jìn)行前后端數(shù)據(jù)請(qǐng)求的主流方式大體有三種：$.ajax倦西、axios 和 fetch能真。
jQuery 中的 $.ajax
jQuery 是曾經(jīng)風(fēng)靡一時(shí)的 js 庫(kù)，作為一個(gè)相對(duì)完善的方法庫(kù)扰柠，里邊自然有對(duì)前后端數(shù)據(jù)請(qǐng)求的封裝方法—— $.ajax 粉铐。
$.ajax 的用法如下，這里列出幾個(gè)常用的參數(shù)
$.ajax({
// 請(qǐng)求方式
type:'GET',
// URL字符串
url:url,
// 發(fā)送到服務(wù)器的數(shù)據(jù)耻矮。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式秦躯。
data:data,
// 預(yù)期服務(wù)器返回的數(shù)據(jù)類(lèi)型。如果不指定裆装，jQuery 將自動(dòng)根據(jù) HTTP 包 MIME 信息來(lái)智能判斷
dataType:dataType,
// 成功回調(diào)
success:function(){},
// 失敗回調(diào)
error:function(){}
})
jQuery 中的 $.ajax 是基于原生 XHR 對(duì)象的相對(duì)完善的封裝版本踱承，使用起來(lái)非常便捷倡缠。但是目前來(lái)看也有一些不足的地方，比如：
$.ajax的缺點(diǎn)：
- $.ajax 的回調(diào)邏輯在內(nèi)部茎活，本身是針對(duì) MVC 架構(gòu)的開(kāi)發(fā)模式而存在的昙沦，而不太符合現(xiàn)在更流行MVVM
- 基于原生的XHR對(duì)象開(kāi)發(fā)，XHR本身的架構(gòu)不清晰
- 如果為了使用 $.ajax 這一個(gè)方法而引入整個(gè)jQuery的話载荔，會(huì)使項(xiàng)目太臃腫
axios
在Vue2.x出現(xiàn)之后盾饮，在項(xiàng)目中使用 axios 已經(jīng)成為主流。axios 的本質(zhì)也是對(duì)原生 XHR 對(duì)象的封裝懒熙，但是它更優(yōu)越的地方是用 Promise 實(shí)現(xiàn)丘损，符合最新的 ES 規(guī)范。
axios({
method:'post',
url:'/xxx/xxx',
data:data
}).then((response)=>{
console.log(response)
}).catch((err)=>{
console.log(err)
})
axios 的特點(diǎn)：
- 支持 Promise
- 從 node.js 中創(chuàng)建 http 請(qǐng)求
- 客戶端支持防止 CSRF
- 自身提供的方法可以對(duì) axios 進(jìn)行二次封裝工扎，攔截請(qǐng)求和響應(yīng)
- 提供了并發(fā)請(qǐng)求的接口
**axios 的自主封裝徘钥、配置攔截器 **
-
axios.create()
創(chuàng)建一個(gè)自定義的 axios 實(shí)例
-
axios.interceptors.request.use()
請(qǐng)求攔截，
axios.interceptors.request.use()方法用于定義在發(fā)送HTTP請(qǐng)求之前要運(yùn)行的代碼肢娘。 -
axios.interceptors.response.use()
響應(yīng)攔截呈础，
axios.interceptors.response.use()方法用于定義在接收HTTP響應(yīng)之前要運(yùn)行的代碼。
// 創(chuàng)建一個(gè)自定義的 axios 實(shí)例
const myAxios = axios.create({
// 請(qǐng)求超時(shí)時(shí)間
timeout:3000
// ... ...
})
// 請(qǐng)求攔截
myAxios.interceptors.request.use( config => {
console.log('請(qǐng)求已發(fā)送');
// 可以在此處打開(kāi)loading橱健，優(yōu)化用戶體驗(yàn)
return config;
})
// 響應(yīng)攔截
myAxios.interceptors.response.use( config => {
if(config.status == 200){
// 響應(yīng)成功而钞，在此處關(guān)閉loading
// 過(guò)濾響應(yīng)數(shù)據(jù)
return config.data;
}
},(err)=>{
// 請(qǐng)求失敗時(shí)拋出異常
return Promise.reject(err);
})
fetch
fetch 在 ES6 中問(wèn)世，是基于了 Promise 設(shè)計(jì)的拘荡。fetch 用起來(lái)有點(diǎn)像 $.ajax 臼节，但是底層天差地別。fetch 基于原生js珊皿，沒(méi)有使用 XHR 對(duì)象官疲。
const url = 'http://localhost/test.htm';
const options = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
//需手動(dòng)轉(zhuǎn)換為字符串
body: JSON.stringify(bodyObj)
};
fetch(url, options)
.then(response => {
console.log(response);
});
fetch 的優(yōu)點(diǎn)：
- 比原生 XHR 對(duì)象的請(qǐng)求語(yǔ)法更簡(jiǎn)潔
- 基于 Promise 實(shí)現(xiàn)，所以支持 async/await
- 脫離了 XHR 對(duì)象亮隙，原理更加底層途凫，提供的API更豐富
axios 和 fetch 的不同
- 發(fā)送數(shù)據(jù)時(shí)， axios 使用 data 屬性溢吻， fetch 使用 body 屬性
- 使用 fetch 時(shí)维费，需手動(dòng)將數(shù)據(jù)進(jìn)行
JSON.stringify() - 在 axios 中，url 在 options 對(duì)象中設(shè)置促王，在 fetch 中犀盟，url 作為第一個(gè)參數(shù)傳入
- axios 封裝的更完善，fetch 更底層蝇狼，使用起來(lái)沒(méi)有那么舒服
總結(jié)
$.ajax 只在 jQuery 項(xiàng)目中使用
fetch 更底層阅畴，對(duì)標(biāo)的是 XHR 對(duì)象，擁有很大的優(yōu)化迅耘，但是并沒(méi)有太完美的封裝
axios 體積小贱枣，功能完善监署，而且封裝了并發(fā)請(qǐng)求
能用 axios 就用 axios
