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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
不懂JavaScript应该怎样学
Apr 16 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
完美解决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
PHPMailer安装方法及简单实例
2008/11/25 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
php获取linux命令结果的实例
2017/03/13 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
jQuery的学习步骤
2011/02/23 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
web打印小结
2017/01/11 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
德国家具在线:Fashion For Home
2017/03/11 全球购物
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
小学生自我鉴定
2013/10/12 职场文书
品牌推广策划方案
2014/05/28 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
市级三好学生评语
2014/12/29 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
九不准学习心得体会
2016/01/23 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
pandas进行数据输入和输出的方法详解
2022/03/23 Python
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技