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


Posted in Javascript onMarch 05, 2018

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

Javascript 相关文章推荐
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 #Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 #Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 #Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 #Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 #Javascript
vue项目中使用ueditor的实例讲解
Mar 05 #Javascript
快速处理vue渲染前的显示问题
Mar 05 #Javascript
You might like
php URL编码解码函数代码
2009/03/10 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
Python生成随机验证码的两种方法
2015/12/22 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
python实现ip代理池功能示例
2019/07/05 Python
python使用建议技巧分享(三)
2020/08/18 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
药学专业个人的自我评价
2013/12/31 职场文书
综合实践活动总结
2014/05/05 职场文书
二手房购房协议书范本
2014/10/05 职场文书
置业顾问岗位职责
2015/02/09 职场文书
2015年中个人总结范文
2015/03/10 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
vue实现拖拽交换位置
2022/04/07 Vue.js