axios攔截設置和錯誤處理方法
更新時間:2018年03月05日 10:17:55 作者:BenjaminShih
下面小編就為大家分享一篇axios攔截設置和錯誤處理方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
現(xiàn)在vue的官方包已經(jīng)不更新vue-resource了,轉而推薦axios,下面是項目實戰(zhàn)是總結的axios插件設置:
/** * @file Axios的Vue插件(添加全局請求/響應攔截器) */ // https://github.com/mzabriskie/axios import axios from 'axios' // 攔截request,設置全局請求為ajax請求 axios.interceptors.request.use((config) => { config.headers['X-Requested-With'] = 'XMLHttpRequest' return config }) // 攔截響應response,并做一些錯誤處理 axios.interceptors.response.use((response) => { const data = response.data // 根據(jù)返回的code值來做不同的處理(和后端約定) switch (data.code) { case '0': // 舉例 // exp: 修復iPhone 6+ 微信點擊返回出現(xiàn)頁面空白的問題 if (isIOS()) { // 異步以保證數(shù)據(jù)已渲染到頁面上 setTimeout(() => { // 通過滾動強制瀏覽器進行頁面重繪 document.body.scrollTop += 1 }, 0) } // 這一步保證數(shù)據(jù)返回,如果沒有return則會走接下來的代碼,不是未登錄就是報錯 return data // 需要重新登錄 case 'SHIRO_E5001': // 微信生產(chǎn)環(huán)境下授權登錄 if (isWeChat() && IS_PRODUCTION) { axios.get(apis.common.wechat.authorizeUrl).then(({ result }) => { location.replace(global.decodeURIComponent(result)) }) } else { // 否則跳轉到h5登錄并帶上跳轉路由 const search = encodeSearchParams({ next: location.href, }) location.replace(`/user/login?${search}`) } // 不顯示提示消息 data.description = '' break default: } // 若不是正確的返回code,且已經(jīng)登錄,就拋出錯誤 const err = new Error(data.description) err.data = data err.response = response throw err }, (err) => { // 這里是返回狀態(tài)碼不為200時候的錯誤處理 if (err && err.response) { switch (err.response.status) { case 400: err.message = '請求錯誤' break case 401: err.message = '未授權,請登錄' break case 403: err.message = '拒絕訪問' break case 404: err.message = `請求地址出錯: ${err.response.config.url}` break case 408: err.message = '請求超時' break case 500: err.message = '服務器內(nèi)部錯誤' break case 501: err.message = '服務未實現(xiàn)' break case 502: err.message = '網(wǎng)關錯誤' break case 503: err.message = '服務不可用' break case 504: err.message = '網(wǎng)關超時' break case 505: err.message = 'HTTP版本不受支持' break default: } } return Promise.reject(err) }) axios.install = (Vue) => { Vue.prototype.$axios = axios } export default axios
以上這篇axios攔截設置和錯誤處理方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue項目登錄模塊滑塊拼圖驗證功能實現(xiàn)代碼(純前端)
滑塊驗證作為一種反機器人的工具,也會不斷發(fā)展和演進,以適應不斷變化的威脅,這篇文章主要給大家介紹了vue項目登錄模塊滑塊拼圖驗證功能實現(xiàn)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù)
有些傳遞的參數(shù)是直接拼接到URL地址欄中的、但是為了統(tǒng)一管理、不能將傳遞的參數(shù)直接拼接到地址欄中,接下來通過本文給大家介紹Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù),感興趣的朋友一起看看吧2022-10-10詳解vue-cli + webpack 多頁面實例配置優(yōu)化方法
本篇文章主要介紹了詳解vue-cli + webpack 多頁面實例配置優(yōu)化方法,具有一定的參考價值,有興趣的可以了解一下2017-07-07Vue實現(xiàn)調節(jié)窗口大小時觸發(fā)事件動態(tài)調節(jié)更新組件尺寸的方法
今天小編就為大家分享一篇Vue實現(xiàn)調節(jié)窗口大小時觸發(fā)事件動態(tài)調節(jié)更新組件尺寸的方法。具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue transition實現(xiàn)點贊動畫效果的示例
點贊動畫是網(wǎng)頁評論中常見的功能,本文將介紹如何用vue實現(xiàn)這一效果。點贊時愛心縮小變大,變大時略微大一點再變正常,取消點贊時愛心無動畫,同時數(shù)字滾動,+1 時向上滾動,-1 時向下滾動2021-05-05