用vue3+vite 二次封装axios

在Vue 3中，可以使用Vite构建工具来快速搭建项目。下面是一个简单的示例，演示如何使用Vite和Axios进行二次封装。

首先，确保已经安装了Vite和Axios。

1. 创建一个新的Vue项目：

# 使用Vite创建新项目
npm init vite my-project
cd my-project
npm install

2. 安装Axios：

npm install axios

3. 创建一个`api`文件夹，并在其中创建一个`request.js`文件，用于封装Axios的请求逻辑：

import axios from 'axios'

// 创建自定义Axios实例
const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置接口基本路径
  timeout: 5000 // 设置请求超时时间
})

// 请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求之前做一些处理，例如添加认证信息等
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器
instance.interceptors.response.use(response => {
  // 在接收到响应数据之前做一些处理，例如统一处理错误码等
  return response.data
}, error => {
  return Promise.reject(error)
})

export default instance

4. 在Vue组件中使用封装好的Axios实例：

import request from '@/api/request'

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

使用以上方法，我们可以将Axios进行二次封装，在Vue项目中更方便地使用。你还可以根据实际需求，进一步扩展封装的功能，例如处理全局错误、统一处理Loading状态等。

**