现在vue的官方包已经不更新vue-resource了,转而推荐axios、下面是项目实战是总结的axios插件设置:
/* *
* @file Axios的Vue插件(添加全局请求/响应拦截器)
*///https://github.com/mzabriskie/axios
从“axios”进口axios//拦截请求,设置全局请求为ajax请求
axios.interceptors.request.use((配置)=比;{
配置。标题(“X-Requested-With”)=' XMLHttpRequest '
返回配置
}）//拦截响应响应,并做一些错误处理
axios.interceptors.response.use((响应)=比;{
常量数据=https://www.yisu.com/zixun/response.data//根据返回的代码值来做不同的处理(和后端约定)
开关(data.code) {
例“0”://举例//经验:修复iPhone 6 +微信点击返回出现页面空白的问题
如果(isIOS ()) {//异步以保证数据已渲染到页面上
setTimeout(()=比;{//通过滚动强制浏览器进行页面重绘
document.body。scrollTop +=1
},0)
}//这一步保证数据返回,如果没有回报则会走接下来的代码,不是未登录就是报的错
返回数据//需要重新登录
例“SHIRO_E5001”://微信生产环境下授权登录
如果(isWeChat (),,IS_PRODUCTION) {
axios.get (apis.common.wechat.authorizeUrl),然后(({结果})=比;{
location.replace (global.decodeURIComponent(结果))
}）
其他}{//否则跳转到编辑登录并带上跳转路由
const搜索=encodeSearchParams ({
下一个:location.href,
}）
location.replace ('/user/登录# 63;${搜索}')
}//不显示提示消息
data.description="
打破
默认值:
}//若不是正确的返回代码,且已经登录,就抛出错误
const呃=新的错误(data.description)
犯错。data=https://www.yisu.com/zixun/data
犯错。响应=响应
把犯错
},(err)=>{//这里是返回状态码不为200时候的错误处理
如果(err & & err.response) {
开关(err.response.status) {
400年情况:
犯错。消息='请求错误的
打破
401年情况:
犯错。消息='未授权,请登录的
打破
403年情况:
犯错。消息='拒绝访问的
打破
404年情况:
犯错。消息='请求地址出错:$ {err.response.config.url} '
打破
408年情况:
犯错。消息='请求超时的
打破
500年情况:
犯错。消息='服务器内部错误的
打破
501年情况:
犯错。消息='服务未实现的
打破
502年情况:
犯错。消息='网关错误的
打破
503年情况:
犯错。消息='服务不可用的
打破
504年情况:
犯错。消息='网关超时的
打破
505年情况:
犯错。消息=' HTTP版本不受支持”
打破
默认值:
}
}
返回Promise.reject(错)
}）
axios。安装=(Vue)=比;{
Vue.prototype。$ axios=axios
}
出口默认axios
以上这篇axios拦截设置和错误处理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
