vue3 axios封装

Vue3 与 Vue2 在使用 axios 进行网络请求的方式上是类似的，都可以通过封装 axios 实现更方便的网络请求操作。下面是一个简单的 Vue3 axios 封装示例：

// src/utils/request.js

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    // 在发送请求之前可以进行一些操作，例如添加 token
    // config.headers['Authorization'] = getToken()
    return config
  },
  error => {
    // 错误处理
    console.log(error)
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    // 对响应数据进行处理，例如统一处理错误码
    const res = response.data
    if (res.code !== 200) {
      console.log('Error:' + res.message)
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    // 错误处理
    console.log(error)
    return Promise.reject(error)
  }
)

export default service

在这个示例中，我们首先创建了一个 axios 实例，设置了基础 URL 和超时时间。然后使用 `interceptors` 对请求和响应进行拦截，可以在拦截器中添加一些通用的操作，例如添加 token、处理错误码等。最后通过 `export default` 导出这个 axios 实例，方便其他地方进行网络请求。

在组件中可以这样使用：

import request from '@/utils/request'

export default {
  methods: {
    fetchData() {
      request.get('/api/data').then(response => {
        // 处理数据
      }).catch(error => {
        // 处理错误
      })
    }
  }
}

这样就可以通过封装的 axios 实例进行网络请求了。注意，这个示例中的 `process.env.VUE_APP_BASE_API` 是在 `.env` 文件中定义的基础 URL，可以根据实际情况进行配置。