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 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
python 输出一个两行字符的变量
2009/02/05 Python
python操作MySQL数据库的方法分享
2012/05/29 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python使用django搭建web开发环境
2017/06/09 Python
Python自定义线程池实现方法分析
2018/02/07 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
信息工程学院毕业生推荐信
2013/11/05 职场文书
给领导的感谢信范文
2015/01/23 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
幸福来敲门观后感
2015/06/04 职场文书
法律意见书范文
2015/06/04 职场文书
爱护环境建议书
2015/09/14 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python
mysql创建存储过程及函数详解
2021/12/04 MySQL
Golang流模式之grpc的四种数据流
2022/04/13 Golang