1.jQuery ajax
```$.ajax({type:'POST',url: url,data: data,dataType: dataType,success:function(){},error:function(){}});```
傳統(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的封裝，除此以外還增添了對(duì)JSONP的支持钠四。經(jīng)過(guò)多年的更新維護(hù)盗扒，真的已經(jīng)是非常的方便了，優(yōu)點(diǎn)無(wú)需多言缀去；如果是硬要舉出幾個(gè)缺點(diǎn)侣灶，那可能只有：
1.本身是針對(duì)MVC的編程,不符合現(xiàn)在前端MVVM的浪潮
2.基于原生的XHR開(kāi)發(fā)，XHR本身的架構(gòu)不清晰缕碎。
3.JQuery整個(gè)項(xiàng)目太大褥影，單純使用ajax卻要引入整個(gè)JQuery非常的不合理（采取個(gè)性化打包的方案又不能享受CDN服務(wù)）
4.不符合關(guān)注分離（Separation of Concerns）的原則
5.配置和調(diào)用方式非常混亂咏雌，而且基于事件的異步模型不友好凡怎。
PS:MVVM(Model-View-ViewModel), 源自于經(jīng)典的 Model–View–Controller（MVC）模式。MVVM 的出現(xiàn)促進(jìn)了 GUI 前端開(kāi)發(fā)與后端業(yè)務(wù)邏輯的分離赊抖，極大地提高了前端開(kāi)發(fā)效率统倒。MVVM 的核心是 ViewModel 層，它就像是一個(gè)中轉(zhuǎn)站（value converter）氛雪，負(fù)責(zé)轉(zhuǎn)換 Model 中的數(shù)據(jù)對(duì)象來(lái)讓數(shù)據(jù)變得更容易管理和使用房匆，該層向上與視圖層進(jìn)行雙向數(shù)據(jù)綁定，向下與 Model 層通過(guò)接口請(qǐng)求進(jìn)行數(shù)據(jù)交互，起呈上啟下作用浴鸿。View 層展現(xiàn)的不是 Model 層的數(shù)據(jù)井氢，而是 ViewModel 的數(shù)據(jù)，由 ViewModel 負(fù)責(zé)與 Model 層交互岳链，這就完全解耦了 View 層和 Model 層花竞，這個(gè)解耦是至關(guān)重要的，它是前后端分離方案實(shí)施的最重要一環(huán)掸哑。
如下圖所示：
image.png
2.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的封裝遍烦，只不過(guò)它是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)輸入近她，從而采取正確的策略。
3.fetch
try{letresponse =awaitfetch(url);letdata = response.json();console.log(data);}catch(e) {console.log("Oops, error", e);}
fetch號(hào)稱是AJAX的替代品膳帕，是在ES6出現(xiàn)的粘捎，使用了ES6中的promise對(duì)象。Fetch是基于promise設(shè)計(jì)的危彩。Fetch的代碼結(jié)構(gòu)比起ajax簡(jiǎn)單多了攒磨，參數(shù)有點(diǎn)像jQuery ajax。但是汤徽，一定記住fetch不是ajax的進(jìn)一步封裝娩缰，而是原生js，沒(méi)有使用XMLHttpRequest對(duì)象谒府。
fetch的優(yōu)點(diǎn)：
1.符合關(guān)注分離拼坎，沒(méi)有將輸入、輸出和用事件來(lái)跟蹤的狀態(tài)混雜在一個(gè)對(duì)象里
2.更好更方便的寫(xiě)法
坦白說(shuō)完疫，上面的理由對(duì)我來(lái)說(shuō)完全沒(méi)有什么說(shuō)服力泰鸡，因?yàn)椴还苁荍query還是Axios都已經(jīng)幫我們把xhr封裝的足夠好，使用起來(lái)也足夠方便壳鹤，為什么我們還要花費(fèi)大力氣去學(xué)習(xí)fetch鸟顺？
我認(rèn)為fetch的優(yōu)勢(shì)主要優(yōu)勢(shì)就是：
1.語(yǔ)法簡(jiǎn)潔，更加語(yǔ)義化2.基于標(biāo)準(zhǔn)Promise實(shí)現(xiàn)，支持async/await3.同構(gòu)方便讯嫂，使用 [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)4.更加底層蹦锋，提供的API豐富（request, response）5.脫離了XHR，是ES規(guī)范里新的實(shí)現(xiàn)方式
最近在使用fetch的時(shí)候欧芽，也遇到了不少的問(wèn)題：
fetch是一個(gè)低層次的API莉掂，你可以把它考慮成原生的XHR，所以使用起來(lái)并不是那么舒服千扔，需要進(jìn)行封裝憎妙。
例如：
1）fetch只對(duì)網(wǎng)絡(luò)請(qǐng)求報(bào)錯(cuò)，對(duì)400曲楚，500都當(dāng)做成功的請(qǐng)求厘唾，服務(wù)器返回 400，500 錯(cuò)誤碼時(shí)并不會(huì)reject龙誊，只有網(wǎng)絡(luò)錯(cuò)誤這些導(dǎo)致請(qǐng)求不能完成時(shí)抚垃，fetch才會(huì)被reject。2）fetch默認(rèn)不會(huì)帶cookie趟大，需要添加配置項(xiàng)：fetch(url, {credentials:'include'})3）fetch不支持abort鹤树，不支持超時(shí)控制，使用setTimeout及Promise.reject的實(shí)現(xiàn)的超時(shí)控制并不能阻止請(qǐng)求過(guò)程繼續(xù)在后臺(tái)運(yùn)行逊朽，造成了流量的浪費(fèi)4）fetch沒(méi)有辦法原生監(jiān)測(cè)請(qǐng)求的進(jìn)度罕伯，而XHR可以
總結(jié)：axios既提供了并發(fā)的封裝，也沒(méi)有fetch的各種問(wèn)題叽讳，而且體積也較小追他，當(dāng)之無(wú)愧現(xiàn)在最應(yīng)該選用的請(qǐng)求的方式。
