未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

现在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拦截设置和错误处理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。


您可能感兴趣的文章:Vue+axios 实现http拦截及路由拦截实例vue+axios实现登录拦截的实例代码axios全局请求参数设置,请求及返回拦截器的方法

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 微信iPhoneiPhone 6服务器XML浏览器数据UCDUTI
tags: err,axios,case,break,message,response,data,gt,拦截,登录,请求,return,config,错误,code
分页:12
转载请注明
本文标题:axios拦截设置和错误处理方法
本站链接:http://www.codesec.net/view/573056.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(56)