/**
?* @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


// 根據返回的code值來做不同的處理（和后端約定）
? switch (data.code) {
? ? case '0':
? ? ? // 舉例
? ? ? // exp: 修復iPhone 6+ 微信點擊返回出現頁面空白的問題
? ? ? if (isIOS()) {
? ? ? ? // 異步以保證數據已渲染到頁面上
? ? ? ? setTimeout(() => {
? ? ? ? ? // 通過滾動強制瀏覽器進行頁面重繪
? ? ? ? ? document.body.scrollTop += 1
? ? ? ? }, 0)
? ? ? }
? ? ? // 這一步保證數據返回，如果沒有return則會走接下來的代碼，不是未登錄就是報錯
? ? ? return data


? ? // 需要重新登錄
? ? case 'SHIRO_E5001':
? ? ? // 微信生產環境下授權登錄
? ? ? 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，且已經登錄，就拋出錯誤
? const err = new Error(data.description)


? err.data = data
? err.response = response


? throw err
}, (err) => { // 這里是返回狀態碼不為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 = '服務器內部錯誤'
? ? ? ? break


? ? ? case 501:
? ? ? ? err.message = '服務未實現'
? ? ? ? break


? ? ? case 502:
? ? ? ? err.message = '網關錯誤'
? ? ? ? break


? ? ? case 503:
? ? ? ? err.message = '服務不可用'
? ? ? ? break


? ? ? case 504:
? ? ? ? err.message = '網關超時'
? ? ? ? break


? ? ? case 505:
? ? ? ? err.message = 'HTTP版本不受支持'
? ? ? ? break


? ? ? default:
? ? }
? }


? return Promise.reject(err)
})


axios.install = (Vue) => {
? Vue.prototype.$axios = axios
}


export default axios

總結

以上是生活随笔為你收集整理的Axios的Vue插件（添加全局请求/响应拦截器）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。