axios拦截设置和错误处理方法

现在vue的官方包已经不更新vue-resource了，转而推荐axios，下面是项目实战是总结的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
// 根据返回的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拦截设置和错误处理方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。