axios拦截设置和错误处理方法
时间:2019-04-13
本文章向大家介绍axios拦截设置和错误处理方法,主要包括axios拦截设置和错误处理方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
现在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拦截设置和错误处理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- ADO.NET入门教程(二)了解.NET数据提供程序
- ADO.NET入门教程(三) 连接字符串,你小觑了吗?
- ADO.NET入门教程(四) 品味Connection对象
- ADO.NET入门教程(五) 细说数据库连接池
- ADO.NET入门教程(六) 谈谈Command对象与数据检索
- ADO.NET入门教程(七) 谈谈Command对象高级应用
- ADO.NET入门教程(八) 深入理解DataAdapter(上)
- 深入理解DIP、IoC、DI以及IoC容器
- C#委托使用详解(Delegates)
- LINC switch系列之安装指南
- 设计模式成长记(一) 抽象工厂模式(Abstract Factory)
- 基于Open vSwitch的VxLAN隧道实验网络
- 来来来,快来围观那个Kotlin
- 怎样提高网站访问速度缩短网页加载时间
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释