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值來做不同的處理(和后端約定) switch (data.code) { case '0': // 舉例 // exp: 修復(fù)iPhone 6+ 微信點(diǎn)擊返回出現(xiàn)頁面空白的問題 if (isIOS()) { // 異步以保證數(shù)據(jù)已渲染到頁面上 setTimeout(() => { // 通過滾動(dòng)強(qiáng)制瀏覽器進(jìn)行頁面重繪 document.body.scrollTop += 1 }, 0) } // 這一步保證數(shù)據(jù)返回,如果沒有return則會(huì)走接下來的代碼,不是未登錄就是報(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ò)誤處理方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目登錄模塊滑塊拼圖驗(yàn)證功能實(shí)現(xiàn)代碼(純前端)
滑塊驗(yàn)證作為一種反機(jī)器人的工具,也會(huì)不斷發(fā)展和演進(jìn),以適應(yīng)不斷變化的威脅,這篇文章主要給大家介紹了vue項(xiàng)目登錄模塊滑塊拼圖驗(yàn)證功能實(shí)現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù)
有些傳遞的參數(shù)是直接拼接到URL地址欄中的、但是為了統(tǒng)一管理、不能將傳遞的參數(shù)直接拼接到地址欄中,接下來通過本文給大家介紹Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù),感興趣的朋友一起看看吧2022-10-10vue 解決addRoutes多次添加路由重復(fù)的操作
這篇文章主要介紹了vue 解決addRoutes多次添加路由重復(fù)的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08詳解vue-cli + webpack 多頁面實(shí)例配置優(yōu)化方法
本篇文章主要介紹了詳解vue-cli + webpack 多頁面實(shí)例配置優(yōu)化方法,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07Vue3 axios配置以及cookie的使用方法實(shí)例演示
這篇文章主要介紹了Vue3 axios配置以及cookie的使用方法,需要的朋友可以參考下2023-02-02Vue實(shí)現(xiàn)調(diào)節(jié)窗口大小時(shí)觸發(fā)事件動(dòng)態(tài)調(diào)節(jié)更新組件尺寸的方法
今天小編就為大家分享一篇Vue實(shí)現(xiàn)調(diào)節(jié)窗口大小時(shí)觸發(fā)事件動(dòng)態(tài)調(diào)節(jié)更新組件尺寸的方法。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue transition實(shí)現(xiàn)點(diǎn)贊動(dòng)畫效果的示例
點(diǎn)贊動(dòng)畫是網(wǎng)頁評(píng)論中常見的功能,本文將介紹如何用vue實(shí)現(xiàn)這一效果。點(diǎn)贊時(shí)愛心縮小變大,變大時(shí)略微大一點(diǎn)再變正常,取消點(diǎn)贊時(shí)愛心無動(dòng)畫,同時(shí)數(shù)字滾動(dòng),+1 時(shí)向上滾動(dòng),-1 時(shí)向下滾動(dòng)2021-05-05