axios拦截设置和错误处理方法

 更新时间:2018年03月05日 10:17:55   作者:BenjaminShih  
下面小编就为大家分享一篇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拦截设置和错误处理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue 实现新国标红绿灯效果实例详解

    Vue 实现新国标红绿灯效果实例详解

    这篇文章主要为大家介绍了Vue 实现新国标红绿灯效果实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 基于vue实现微博三方登录流程解析

    基于vue实现微博三方登录流程解析

    这篇文章主要介绍了基于vue实现微博三方登录流程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • vue slot与传参实例代码讲解

    vue slot与传参实例代码讲解

    这篇文章主要介绍了vue slot与传参实例代码讲解,在文章末尾给大家介绍了vue 利用slot向父组件传值的方法,需要的朋友可以参考下
    2019-04-04
  • vue项目history模式刷新404问题解决办法

    vue项目history模式刷新404问题解决办法

    这篇文章主要给大家介绍了关于vue项目history模式刷新404问题的解决办法,需要的朋友可以参考下
    2023-11-11
  • Vue路由回退的完美解决方案(vue-route-manager)

    Vue路由回退的完美解决方案(vue-route-manager)

    最近做了一个vue项目关于路由场景的问题,路由如何回退指定页面,在此做个记录,这篇文章主要给大家介绍了关于Vue路由回退的完美解决方案,主要利用的是vue-route-manager,需要的朋友可以参考下
    2021-09-09
  • Vue中路由参数与查询参数传递对比解析

    Vue中路由参数与查询参数传递对比解析

    在Vue.js中,路由与导航不仅涉及页面切换,还包括了向页面传递参数和获取查询参数,这篇文章主要介绍了Vue路由参数与查询参数传递,需要的朋友可以参考下
    2023-08-08
  • vue如何导出json数据为excel表格并保存到本地

    vue如何导出json数据为excel表格并保存到本地

    这篇文章主要介绍了vue如何导出json数据为excel表格并保存到本地问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 浅谈关于iview表单验证的问题

    浅谈关于iview表单验证的问题

    这篇文章主要介绍了浅谈关于iview表单验证的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue3+element plus中利用el-menu如何实现路由跳转

    vue3+element plus中利用el-menu如何实现路由跳转

    这篇文章主要给大家介绍了关于vue3+element plus中利用el-menu如何实现路由跳转的相关资料,在Vue Router中我们可以使用el-menu组件来实现菜单导航,通过点击菜单项来跳转到不同的路由页面,需要的朋友可以参考下
    2023-12-12
  • Vue+element自定义指令如何实现表格横向拖拽

    Vue+element自定义指令如何实现表格横向拖拽

    这篇文章主要介绍了Vue+element自定义指令如何实现表格横向拖拽,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论