vue2.0 axios interceptors 拦截器

最新推荐文章于 2025-02-12 09:25:57 发布

weixin_34236497

最新推荐文章于 2025-02-12 09:25:57 发布

阅读量222

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python 后端 ViewUI

原文链接：https://my.oschina.net/heyjuan/blog/1550695

本文介绍如何在main.js中使用Axios进行全局配置，包括请求拦截与响应拦截的具体实现方式，以及针对不同错误状态码的处理策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

官方文档地址: https://github.com/axios/axios#axiosposturl-data-config

main.js 文件中配置

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

转载于:https://my.oschina.net/heyjuan/blog/1550695