vue3的axios二次封装

在Vue 3中，可以通过创建一个单独的axios实例来进行二次封装。以下是一个示例代码：

// 创建axios实例
import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置接口的基本url
  timeout: 5000 // 设置请求超时时间
})

// 设置请求拦截器
instance.interceptors.request.use(
  config => {
    // 在请求发送前可以做一些处理，比如添加token等
    // ...
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 设置响应拦截器
instance.interceptors.response.use(
  response => {
    // 在响应成功后可以做一些处理，比如对响应数据进行转换等
    // ...
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default instance

在上面的示例中，我们通过`axios.create`方法创建了一个axios实例，并设置了一些基本的配置项。然后通过`interceptors`设置了请求和响应的拦截器，在拦截器中可以对请求和响应进行一些处理，比如添加token、转换数据等。

在Vue组件中，可以直接引入该axios实例并使用，如下所示：

import axios from '@/utils/axios'

export default {
  setup() {
    axios.get('xxx').then((res) => {
      console.log(res)
    })
  }
}

这样就完成了Vue 3中axios的二次封装。