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获取隐藏dom的宽高 具体实现
Jul 14 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
async/await地狱该如何避免详解
May 10 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 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数组总结篇(一)
2008/09/30 PHP
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
封装一个PDO数据库操作类代码
2009/09/09 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
PHP图片加水印实现方法
2016/05/06 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
php session_decode函数用法讲解
2019/05/26 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
python模拟事件触发机制详解
2018/01/19 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Python中的全局变量如何理解
2020/06/04 Python
女大学生毕业找工作的自我评价
2013/10/03 职场文书
文史专业毕业生自荐信
2013/11/17 职场文书
好人好事演讲稿
2014/09/01 职场文书
普通党员整改措施
2014/10/24 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
初中语文教师研修日志
2015/11/13 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android