Vite-Vue3-TypeScript环境下的axios配置与API封装

在Vite-Vue3-TypeScript项目中，为了方便地进行HTTP请求，我们常常会使用axios这个强大的库。下面我们将分步骤介绍如何配置axios以及如何封装API请求。
一、安装axios
首先，你需要安装axios。在项目根目录下打开终端，运行以下命令：

npm install axios

或者使用yarn：

yarn add axios

二、配置axios

1. 在main.ts文件中引入axios：

   import { createApp } from 'vue'
   import App from './App.vue'
   import axios from 'axios'
   const app = createApp(App)
   app.config.globalProperties.$axios = axios // 将axios挂载到Vue实例上，方便在组件中调用
   app.mount('#app')

2. 配置axios的基本信息（可选）：
   你可以在项目的根目录下创建一个config.ts文件，用于配置axios的基本信息，例如baseURL、headers等。这样可以在多个请求中复用这些配置。例如：

   import axios from 'axios'
   // 配置axios的基础信息，如baseURL、headers等
   const instance = axios.create({
   baseURL: 'https://api.example.com', // 设置基础URL，所有请求都会自动加上这个前缀
   headers: { 'Content-Type': 'application/json' }, // 设置默认的请求头信息
   })
   export default instance // 导出配置好的axios实例，以便在其他文件中使用

3. 在需要使用axios的组件中，通过import引入配置好的axios实例。例如：

   import axios from './config' // 引入配置好的axios实例

   三、封装API请求
   为了方便管理和复用代码，我们可以创建一个专门的文件来封装API请求。下面是一个简单的示例：
4. 在项目根目录下创建一个名为api.ts的文件，用于封装API请求。例如：

   import axios from 'axios' // 引入axios库
   import { ref } from 'vue' // 引入Vue的ref函数，用于创建响应式数据
   import store from './store' // 引入项目中的store（如果有使用的话）
   import { onErrorCaptured } from './error-handling' // 引入错误处理函数（如果有使用的话）