vue拦截器

Vue拦截器可以用来拦截请求和响应，对其进行统一处理或者添加一些额外的逻辑。在Vue中，可以通过使用Axios拦截器来实现。Axios是一个流行的HTTP客户端，可以在浏览器和Node.js中使用。Axios拦截器有两种类型：请求拦截器和响应拦截器。

请求拦截器可以用来在发送请求前进行一些处理，比如添加请求头、设置请求超时时间、添加loading等。响应拦截器可以用来在接收到响应后进行一些处理，比如统一处理错误、处理返回数据等。

以下是一个使用Axios拦截器的示例：

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers['Authorization'] = 'Bearer ' + getToken()
    return config
  },
  error => {
    // 处理请求错误
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据进行处理
    const res = response.data
    if (res.code !== 20000) {
      // 处理错误
      return Promise.reject('error')
    } else {
      return res
    }
  },
  error => {
    // 处理响应错误
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

在上面的代码中，我们创建了一个Axios实例，并使用拦截器对请求和响应进行了处理。在请求拦截器中，我们添加了Authorization请求头，并设置了请求超时时间。在响应拦截器中，我们对响应数据进行了处理，如果返回的code不为20000，则表示请求失败，否则返回res。