vue 拦截器如何使用

Vue 拦截器通常用于在发送请求或响应数据时对其进行一些处理或修改。下面是一个简单的使用示例：

1. 创建一个 axios 实例并设置拦截器

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com'
})

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

export default instance

2. 在组件中使用 axios 实例发送请求

import axios from '@/utils/axios'

export default {
  created () {
    axios.get('/users')
      .then(response => {
        console.log(response)
      })
      .catch(error => {
        console.log(error)
      })
  }
}

在以上示例中，我们创建了一个 axios 实例并设置了请求拦截器和响应拦截器。在请求拦截器中，我们为请求添加了一个 `Authorization` 头部，该头部包含了用户的 token，以便服务器能够验证用户身份。在响应拦截器中，我们对响应数据进行了一些处理，并返回了处理后的数据。在组件中，我们使用了该 axios 实例发送了一个 GET 请求，并在 `then` 和 `catch` 中处理了响应数据和错误信息。