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技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
js实现幻灯片轮播图
Aug 14 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目录操作函数之获取目录与文件的类型
2010/12/29 PHP
php封装的page分页类完整实例
2016/10/18 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
vue.js的安装方法
2017/05/12 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
浅谈Python peewee 使用经验
2017/10/20 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
详解python程序中的多任务
2020/09/16 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
Delphi软件工程师试题
2013/01/29 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
学习党课思想汇报
2013/12/29 职场文书
毕业生应聘求职信
2014/07/10 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
工厂标语大全
2014/10/06 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
以下牛机,你有几个
2022/04/05 无线电