Vue项目开发如何添加请求拦截器和响应拦截器

在Vue项目中，我们通常会将Axios的配置打包到一个单独的文件中，比如api.js在这个文件中，我们可以添加请求拦截器和响应拦截器进行一些常规的处理，比如添加token和统一处理错误消息。

具体实现代码如下：

import axios from 'axios'

// 创建一个Axios实例
const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 10000,
})

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

// 添加响应拦截器
instance.interceptors.response.use(response => {
  // 对响应数据进行一些处理
  return response.data
}, error => {
  // 响应错误时做一些处理
  return Promise.reject(error)
})

export default instance