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 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
完美解决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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
原生js生成图片验证码
2020/10/11 Javascript
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
多个应用共存的Django配置方法
2018/05/30 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
大学生演讲稿
2014/04/25 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
工商管理本科生求职信
2014/07/13 职场文书
员工培训协议书
2014/09/15 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
高考升学宴主持词
2019/06/21 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle