Vue3 中如何解决 Axios 请求封装问题

在 Vue3 的项目开发中，Axios 作为常用的 HTTP 库，对其进行合理的请求封装至关重要，这不仅能提高代码的可维护性，还能增强项目的整体架构性。

我们需要安装 Axios。在项目目录下，通过 npm install axios 命令即可将其快速安装到项目中。安装完成后，就可以开始进行封装操作。

创建一个专门用于 Axios 封装的文件，比如 axios.js。在这个文件中，我们先引入 Axios 实例，并对其进行一些全局配置。例如，可以设置基础的请求地址、超时时间等。

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 基础请求地址
  timeout: 5000 // 超时时间设置为 5 秒
})

接下来，我们可以对请求和响应进行拦截器的设置。请求拦截器可以用于在请求发送前添加一些公共的参数，比如用户的 Token。

service.interceptors.request.use(
  config => {
    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 { data } = response
    if (data.code!== 200) {
      // 处理错误情况
      console.error('请求错误', data.message)
      return Promise.reject(data.message)
    }
    return data
  },
  error => {
    console.error('网络错误', error)
    return Promise.reject(error)
  }
)

完成上述配置后，我们将封装好的 Axios 实例导出，以便在组件中使用。

export default service

在 Vue3 组件中使用时，只需引入封装好的 Axios 实例，就可以轻松发起各种请求。

<template>
  <div>
    <button @click="fetchData">获取数据</button>
  </div>
</template>

<script setup>
import axios from './axios.js'

const fetchData = async () => {
  try {
    const response = await axios.get('/api/data')
    console.log(response)
  } catch (error) {
    console.error(error)
  }
}
</script>

通过以上步骤，我们在 Vue3 中成功地对 Axios 请求进行了封装，使项目中的 HTTP 请求管理更加高效、便捷，为后续的开发和维护提供了极大的便利。