vue-axios拦截机制

Vue-Axios 拦截机制允许你在发送每个 HTTP 请求之前或之后执行自定义操作。这可以通过设置全局或局部的 interceptors 实现。以下是拦截器的基本用法：

1. **安装并配置全局拦截器**[^2]:

import VueAxios from 'vue-axios-plugin'
import axios from 'axios'

Vue.use(VueAxios, axios)

// 全局配置，对所有请求生效
VueAxios.interceptors.request.use(
  config => {
    // 在请求发出前进行修改
    // 示例：添加默认 headers 或 token
    if (localStorage.token) {
      config.headers.Authorization = `Bearer ${localStorage.token}`
    }
    return config
  },
  error => {
    // 对错误处理
    console.error(error)
    Promise.reject(error)
  }
)

VueAxios.interceptors.response.use(
  response => {
    // 成功响应处理
    return response.data
  },
  error => {
    // 错误响应处理，如处理网络错误或服务器返回的状态码
    if (error.response.status === 401) {
      // 处理未授权情况
    } else {
      console.error(error)
    }
    return Promise.reject(error.response.data)
  }
)

2. **局部拦截器**（针对特定组件或路由）:
如果你只想在某个组件内部拦截请求，可以在组件的 created 或 mounted 生命周期钩子中设置：

export default {
  created() {
    this.$axios.interceptors.request.use(
      // 局部请求拦截
      ...
    )
  },
  ...
}

通过这些拦截器，你可以定制请求的发起方式、添加身份验证信息、处理错误等。