vue3的axios的封装

在 Vue 3 中，可以通过封装 Axios 来简化网络请求的代码，提高代码复用性。以下是一个简单的封装示例：

import axios from 'axios'

const request = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000, // 请求超时时间
})

// 请求拦截器
request.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 响应拦截器
request.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error)
  }
)

export default request

可以看到，在封装中，我们通过 `create` 方法来创建了一个 Axios 实例，并设置了一些默认的配置。同时，我们还通过 `interceptors` 方法来设置了请求和响应的拦截器，在请求和响应之前可以进行一些共通的处理。最后，我们将封装好的 Axios 实例导出，方便在组件中使用。

在组件中使用封装好的 Axios，只需要引入并调用即可：

import request from './request'

export default {
  methods: {
    fetchData() {
      request.get('/api/data').then(response => {
        console.log(response.data)
      })
    }
  }
}

这样，我们就可以通过封装来简化网络请求的代码，提高代码复用性。