Vue3 中 axios 的封装方法

在 Vue3 项目开发中，合理封装 axios 能够极大地提升代码的可维护性与复用性。接下来，我们就详细探讨一下 Vue3 中 axios 的封装方法。

要确保项目中已经安装了 axios。可以通过 npm 或 yarn 进行安装，例如：npm install axios。安装完成后，就可以开始封装工作。

创建一个专门用于封装 axios 的文件，通常命名为 axios.js 或 http.js。在这个文件中，先引入 axios 库。

import axios from 'axios'

接下来，创建一个 axios 实例。可以对实例进行一些全局配置，比如设置基础 URL、超时时间等。

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 基础 URL
  timeout: 5000 // 超时时间
})

这里的 process.env.VUE_APP_BASE_API 可以在项目的环境变量文件中进行配置，方便在不同环境下切换 API 地址。

为了更好地处理请求和响应，我们可以使用拦截器。请求拦截器可以在请求发送前进行一些操作，例如添加 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 res = response.data
    if (res.code!== 200) {
      console.error('请求出错:', res.message)
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.error('网络错误:', error)
    return Promise.reject(error)
  }
)

最后，将封装好的 axios 实例导出，以便在组件中使用。

export default service

在 Vue3 组件中使用封装好的 axios 也很简单。首先引入封装的 axios 实例，然后就可以像平时使用 axios 一样发起请求。

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

<script setup>
import http from '@/utils/http'

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

通过以上步骤，我们在 Vue3 中成功地完成了 axios 的封装，使得项目中的 API 请求更加规范、易于管理。