關注「前端學苑」 ，堅持每天進步一點點
「~axios封裝~」
前端技術真是一個發展飛快的領域，jquery的時代，那時用的是 ajax 來處理數據請求。現在vue時代已經到來，axios 和 fetch都已經開始分別搶佔「請求」這個前端高地。本文將會嘗試著闡述他們之間的區別，並給出自己的一些理解。
一、ajax, Axios, Fetch區別：
1、JQuery ajax （ 廉頗老矣，尚能飯，但是總有飯不動的一天 ）
對原生XHR的封裝，除此以外還增添了對JSONP的支持。JQuery ajax經過多年的更新維護，真的已經是非常的方便了。
$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});缺點：
1）本身是針對MVC的編程，不符合現在前端MVVM的浪潮。
2）基於原生的XHR開發，XHR本身的架構不清晰，已經有了fetch的替代方案。
3）JQuery整個項目太大，單純使用ajax卻要引入整個JQuery非常的不合理（採取個性化打包的方案又不能享受CDN服務）
最主要的是隨著VUE，REACT新一代框架的興起，以及ES規範的完善，更多API的更新，JQuery這種大而全的JS庫，未來的路會越走越窄。
2、Axios （ 誰敢橫刀立馬，唯Axios將軍 ）
Vue2.0之後，Axios替換JQuery ajax。Axios 是一個基於 promise 的 HTTP 庫，用於瀏覽器和node.js等http客戶端。符合最新的ES規範。
axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});
Axios特性
1）支持 promise API
2）攔截請求和響應
3）轉換請求數據和響應數據
4）取消請示
5）自動轉換JSON數據
6）客戶端支持防禦 XSRF
3、Fetch （ 酋長的孩子，還需成長 ）
Fetch號稱是AJAX的替代品，好處如下：
1) 符合關注分離，沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個對象裡。
2) 更好更方便的寫法，諸如：
try { let response = await fetch(url); let data = response.json(); console.log(data);} catch(e) { console.log("Oops, error", e);}Fetch的優勢主要優勢就是：
1）更加底層，提供的API豐富（request, response）
2）脫離了XHR，是ES規範裡新的實現方式
Fetch 常見坑
1）Fetch 請求默認是不帶 cookie 的，需要設置 fetch(url, {credentials: 'include'})
2）伺服器返回 400，500 錯誤碼時並不會 reject，只有網絡錯誤這些導致請求不能完成時，fetch 才會被 reject。
二、Vue中axios的使用
axios為什麼要二次封裝
1、代碼封裝，重用性高，減少代碼量，減低維護難度。
2、統一處理一些常規的問題一勞永逸，如http錯誤。
3、攔截請求和響應，提前對數據進行處理，如獲取token，修改配置項。
1、請求配置默認值
1）全局的 axios 默認值axios.defaults.baseURL = 'https://api.example.com';axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';2）自定義實例默認值// 創建實例時設置配置的默認值var instance = axios.create({ baseURL: 'https://api.example.com'});
// 在實例已創建後修改默認值instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;2、axios常用請求方法
axios請求方法：get，post，put，patch，delete
get: 獲取數據
post: 提交數據 （表單提交+文件上傳）
put: 更新數據 （所有數據推送到後端）
patch: 更新數據 （只將修改的數據推送到後端）
delete: 刪除數據
1）get方法傳遞參數時需注意
axios.get('/data/json',{ params: { id: 12 }}).then(res => { console.log(res); })說明：
status code: 304 not modified //請求到的數據與上次相同就會返回304 數據重定向。
2）post方法
常用的data格式：
（1）form-data 用於表單提交，圖標與文件上傳
Content-Type：multipart/from-data //表示post方式以 formdata 形式發送
（2）applicition/json
Content-Type：applicition/json //表示post方式以 json 格式發送
3）delete方法
（1）接口需要在url上拼接參數
axios.delete('/delete',{ params:{id: 12} //query string parameters}).then()（2）不是在url上進行傳輸的
axios.delete('/delete',{ data:{id: 12} //request payload}).then()4）並發請求並發請求：同時進行多個請求，並統一處理返回值。兩個步驟：
（1）axios.all([]).then()
（2）axios.spread()
axios.all([ axios.get('url1'), axios.get('url2')]).then( axios.spread((res1, res2) => { console.log(res1, res2); }))3、攔截器
1）攔截器科普// 添加請求攔截器axios.interceptors.request.use(function (config) { // 在發送請求之前做些什麼 return config;}, function (error) { // 對請求錯誤做些什麼 return Promise.reject(error);});
// 添加響應攔截器axios.interceptors.response.use(function (response) { // 對響應數據做點什麼 return response;}, function (error) { // 對響應錯誤做點什麼 return Promise.reject(error);});2）取消攔截器
let interceptors = axios.interceptors.request.use( config => { // 在發送請求前做些什麼 return config }, error => { // 請求錯誤的時候做什麼 return Promise.reject(error) });// 取消攔截器axios.interceptors.request.eject(interceptors);3）響應的錯誤處理封裝
axios.interceptors.response.use(response => { return response;}, error => { if (error && error.response.status) { switch(error.response.status) { case 400: error.message = '請求錯誤'; break; case 401: error.message = '未授權，請重新登錄'; break; case 403: error.message = '拒絕訪問'; break; case 500: error.message = '服務端出錯'; default: error.message = `連接錯誤${error.message.status}`; } } else { error.message = '連接伺服器失敗'; } return Promise.resolve(error);});總結1 、對axios的二次封裝可以統一前後端交互的請求/響應數據類型，統一處理http錯誤碼和自定義的code，避免在組件中頻繁的判斷，以及code碼的使用混亂。
2､對api的集中管理和按需引用有助於項目管理和重構，代碼的復用,實際項目開發時可以按模塊對api進行劃分，結構清晰。
推薦熱門技術文章：
2、初探 Electron 桌面應用 - 理論篇
3、解鎖 Webpack，看這篇就夠了
4、乾貨：前端開發常見規範
5、這一次，徹底弄懂 Promise
6、關於移動端適配，你必須要知道的
7、你還是只會 npm install 嗎？
8、讓程式設計師變懶的 「vue-admin-template」 後臺管理系統
9、這樣配置，讓你的VS Code好用到飛起！
10、前端性能優化實戰
覺得本文對你有幫助？請分享給更多人
關注「前端學苑」加星標，提升前端技能