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实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
js实现省级联动(数据结构优化)
Jul 17 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
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
python实现人脸识别代码
2017/11/08 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
数控专业应届生求职信
2013/11/27 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
大学生毕业求职信
2014/06/12 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技