前言
單頁(yè)面應(yīng)用大多采用前后端分離開(kāi)發(fā)思路阅虫，我們知道，前端和后端交互有多中方式(服務(wù)器端渲染不跟、Ajax颓帝、websocket等)，今天我們主要講解Ajax部分。
最近團(tuán)隊(duì)討論了一下躲履，Ajax 本身跟 Vue 并沒(méi)有什么需要特別整合的地方见间，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果工猜，vue-resource 提供的價(jià)值和其維護(hù)成本相比并不劃算米诉，所以決定在不久以后取消對(duì) vue-resource 的官方推薦。已有的用戶可以繼續(xù)使用篷帅，但以后不再把 vue-resource 作為官方的 ajax 方案史侣。
-- 摘自vuefe.github.io
vue更新至2.0之后，官方推薦的Ajax插件庫(kù)是axios魏身，而不再是vue-resource惊橱，理由如上。
axios快速使用
如何安裝請(qǐng)移步axios箭昵，文檔描述的很清楚税朴。
常見(jiàn)用法
其實(shí)我們用的最多的就是get、post請(qǐng)求家制。
Performing a GET request
// get
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Performing a POST request
axios.post('/user' , {
params: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
掌握了以上兩種最基本的用法正林，我們已經(jīng)可以去進(jìn)行開(kāi)發(fā)了。
示例demo
演示了如何使用axios請(qǐng)求cnode社區(qū)的API颤殴。
請(qǐng)點(diǎn)擊這里
axios的封裝
上一步已經(jīng)實(shí)現(xiàn)用axios請(qǐng)求網(wǎng)絡(luò)資源觅廓，那為什么要封裝axios呢？
以下幾點(diǎn)原因：
- 配置通用項(xiàng)
- 統(tǒng)一處理請(qǐng)求錯(cuò)誤涵但，進(jìn)行提示
完整源碼
請(qǐng)點(diǎn)擊這里
請(qǐng)求流程
請(qǐng)求失敗
通常請(qǐng)求失敗有兩種原因：
- 網(wǎng)絡(luò)異常/服務(wù)器宕機(jī)
- 后端拋出錯(cuò)誤
每個(gè)后端在請(qǐng)求失敗時(shí)返回的數(shù)據(jù)結(jié)構(gòu)大同小異杈绸，前后端可以商量好，我的后臺(tái)返回給我的請(qǐng)求失敗接口如下：
{
"status": 1,
"msg": "購(gòu)物車(chē)為空",
"success": false
}
如果只是普通用法矮瘟，如下所示：
axios.post('/user' , {
params: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
// 處理響應(yīng)
// 其中存在后端返回的錯(cuò)誤
})
.catch(function (error) {
// 網(wǎng)絡(luò)異常引發(fā)的錯(cuò)誤
});
我們知道瞳脓，一般中大型規(guī)模的項(xiàng)目，請(qǐng)求是比較多的芥永，這樣導(dǎo)致代碼冗余篡殷，會(huì)越來(lái)越臃腫，我們可以對(duì)錯(cuò)誤進(jìn)行預(yù)處理埋涧。
攔截器
在普通用法中，then()處理響應(yīng)奇瘦，catch()處理錯(cuò)誤棘催，通過(guò)攔截器，可以提前判斷耳标，并返回二者之一醇坝。
這里并沒(méi)有在攔截器中對(duì)錯(cuò)誤進(jìn)行處理，而是將響應(yīng)或者錯(cuò)誤返回到get/post請(qǐng)求的結(jié)果中，通過(guò)鏈?zhǔn)教幚怼?/p>
// 請(qǐng)求時(shí)的攔截
axios.interceptors.request.use(function (config) {
// 發(fā)送請(qǐng)求之前做一些處理
return config;
}, function (error) {
// 當(dāng)請(qǐng)求異常時(shí)做一些處理
return Promise.reject(error);
});
// 響應(yīng)時(shí)攔截
axios.interceptors.response.use(function (response) {
// 返回響應(yīng)時(shí)做一些處理
return response;
}, function (error) {
// 當(dāng)響應(yīng)異常時(shí)做一些處理
return Promise.reject(error);
});
封裝get呼猪，post方法
封裝的get/post方法由3部分組成:
- 基本配置
包括請(qǐng)求方法画畅，基礎(chǔ)url，相對(duì)url宋距，參數(shù)轴踱，超時(shí)時(shí)間，請(qǐng)求頭等谚赎。 - checkStatus()
鏈?zhǔn)教幚淼谝徊揭В袛鄅ttp狀態(tài)碼是否正常，和攔截器一樣壶唤，請(qǐng)求正常則返回響應(yīng)雳灵，請(qǐng)求異常則返回錯(cuò)誤，最后返回結(jié)果給checkCode()闸盔。 - checkCode()
鏈?zhǔn)教幚淼诙矫跽蓿幚砩弦徊降慕Y(jié)果，分別處理網(wǎng)絡(luò)異常迎吵，以及后端返回的異常躲撰。
在組件中引用
注: 使用babel-preset-stage-3才可保證async和await正常使用。
引入封裝后的axios
import http from '../utils/http'
import api from '../utils/api'
使用方法
fetchData: async function () {
let params = {
}
const res = await http.get(api.right, params)
if (res.data.success) {
alert('請(qǐng)求成功')
}
}
參考
非原創(chuàng)钓觉，在以下文章基礎(chǔ)上修改而成茴肥。
vue中統(tǒng)一處理ajax錯(cuò)誤
