在Vue3开发中，Axios作为一个流行的HTTP库，极大地方便了我们与后端进行数据交互。合理地封装Axios请求，不仅能提高代码的可维护性，还能让项目结构更加清晰。下面我们就来详细探讨Vue3中Axios请求的封装及在组件中的使用方法。

首先是Axios的安装，在项目目录下通过命令行运行 npm install axios 即可完成安装。

接着进行封装，在src目录下创建一个utils文件夹，在其中新建一个axios.js文件。在这个文件里，我们可以创建一个Axios实例。例如：

import axios from 'axios'

// 创建Axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 基础接口地址
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 例如添加token
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code!== 200) {
      // 处理错误情况
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

完成封装后，在组件中使用就变得非常简单。比如在一个.vue组件中：

<template>
  <div>
    <button @click="getUserData">获取用户数据</button>
    <p>{{ userData }}</p>
  </div>
</template>

<script setup>
import axios from '@/utils/axios'
import { ref } from 'vue'

const userData = ref('')

const getUserData = async () => {
  try {
    const response = await axios.get('/user')
    userData.value = response.data
  } catch (error) {
    console.error('获取数据失败', error)
  }
}
</script>

通过上述步骤，我们实现了Vue3中Axios请求的封装以及在组件中的使用。这种方式让数据请求代码更加集中，便于管理和维护，无论是处理请求头、错误处理还是代码复用都变得更加便捷高效，为Vue3项目开发提供了有力的支持。