axios攔截設(shè)置和錯(cuò)誤處理方法
現(xiàn)在vue的官方包已經(jīng)不更新vue-resource了,轉(zhuǎn)而推薦axios,下面是項(xiàng)目實(shí)戰(zhàn)是總結(jié)的axios插件設(shè)置:
/**
* @file Axios的Vue插件(添加全局請(qǐng)求/響應(yīng)攔截器)
*/
// https://github.com/mzabriskie/axios
import axios from 'axios'
// 攔截request,設(shè)置全局請(qǐng)求為ajax請(qǐng)求
axios.interceptors.request.use((config) => {
config.headers['X-Requested-With'] = 'XMLHttpRequest'
return config
})
// 攔截響應(yīng)response,并做一些錯(cuò)誤處理
axios.interceptors.response.use((response) => {
const data = response.data
// 根據(jù)返回的code值來(lái)做不同的處理(和后端約定)
switch (data.code) {
case '0':
// 舉例
// exp: 修復(fù)iPhone 6+ 微信點(diǎn)擊返回出現(xiàn)頁(yè)面空白的問題
if (isIOS()) {
// 異步以保證數(shù)據(jù)已渲染到頁(yè)面上
setTimeout(() => {
// 通過(guò)滾動(dòng)強(qiáng)制瀏覽器進(jìn)行頁(yè)面重繪
document.body.scrollTop += 1
}, 0)
}
// 這一步保證數(shù)據(jù)返回,如果沒有return則會(huì)走接下來(lái)的代碼,不是未登錄就是報(bào)錯(cuò)
return data
// 需要重新登錄
case 'SHIRO_E5001':
// 微信生產(chǎn)環(huán)境下授權(quán)登錄
if (isWeChat() && IS_PRODUCTION) {
axios.get(apis.common.wechat.authorizeUrl).then(({ result }) => {
location.replace(global.decodeURIComponent(result))
})
} else {
// 否則跳轉(zhuǎn)到h5登錄并帶上跳轉(zhuǎn)路由
const search = encodeSearchParams({
next: location.href,
})
location.replace(`/user/login?${search}`)
}
// 不顯示提示消息
data.description = ''
break
default:
}
// 若不是正確的返回code,且已經(jīng)登錄,就拋出錯(cuò)誤
const err = new Error(data.description)
err.data = data
err.response = response
throw err
}, (err) => { // 這里是返回狀態(tài)碼不為200時(shí)候的錯(cuò)誤處理
if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = '請(qǐng)求錯(cuò)誤'
break
case 401:
err.message = '未授權(quán),請(qǐng)登錄'
break
case 403:
err.message = '拒絕訪問'
break
case 404:
err.message = `請(qǐng)求地址出錯(cuò): ${err.response.config.url}`
break
case 408:
err.message = '請(qǐng)求超時(shí)'
break
case 500:
err.message = '服務(wù)器內(nèi)部錯(cuò)誤'
break
case 501:
err.message = '服務(wù)未實(shí)現(xiàn)'
break
case 502:
err.message = '網(wǎng)關(guān)錯(cuò)誤'
break
case 503:
err.message = '服務(wù)不可用'
break
case 504:
err.message = '網(wǎng)關(guān)超時(shí)'
break
case 505:
err.message = 'HTTP版本不受支持'
break
default:
}
}
return Promise.reject(err)
})
axios.install = (Vue) => {
Vue.prototype.$axios = axios
}
export default axios
以上這篇axios攔截設(shè)置和錯(cuò)誤處理方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue?實(shí)現(xiàn)新國(guó)標(biāo)紅綠燈效果實(shí)例詳解
這篇文章主要為大家介紹了Vue?實(shí)現(xiàn)新國(guó)標(biāo)紅綠燈效果實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
vue項(xiàng)目history模式刷新404問題解決辦法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目history模式刷新404問題的解決辦法,需要的朋友可以參考下2023-11-11
Vue路由回退的完美解決方案(vue-route-manager)
最近做了一個(gè)vue項(xiàng)目關(guān)于路由場(chǎng)景的問題,路由如何回退指定頁(yè)面,在此做個(gè)記錄,這篇文章主要給大家介紹了關(guān)于Vue路由回退的完美解決方案,主要利用的是vue-route-manager,需要的朋友可以參考下2021-09-09
Vue中路由參數(shù)與查詢參數(shù)傳遞對(duì)比解析
在Vue.js中,路由與導(dǎo)航不僅涉及頁(yè)面切換,還包括了向頁(yè)面?zhèn)鬟f參數(shù)和獲取查詢參數(shù),這篇文章主要介紹了Vue路由參數(shù)與查詢參數(shù)傳遞,需要的朋友可以參考下2023-08-08
vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地
這篇文章主要介紹了vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue3+element?plus中利用el-menu如何實(shí)現(xiàn)路由跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于vue3+element?plus中利用el-menu如何實(shí)現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,在Vue?Router中我們可以使用el-menu組件來(lái)實(shí)現(xiàn)菜單導(dǎo)航,通過(guò)點(diǎn)擊菜單項(xiàng)來(lái)跳轉(zhuǎn)到不同的路由頁(yè)面,需要的朋友可以參考下2023-12-12
Vue+element自定義指令如何實(shí)現(xiàn)表格橫向拖拽
這篇文章主要介紹了Vue+element自定義指令如何實(shí)現(xiàn)表格橫向拖拽,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10

