vue3ts安装axios

### 安装 Axios 为了在 Vue 3 TypeScript 项目中集成 Axios，首先需要通过 npm 或 yarn 来安装 Axios 及其类型定义： ```bash npm install axios @types/axios ``` 或者使用 Yarn: ```bash yarn add axios @types/axios ``` 这一步骤确保了 Axios 库及其对应的 TypeScript 类型被正确引入到项目环境中[^2]。 ### 创建 Axios 实例 创建一个新的文件 `src/api/index.ts` 并初始化 Axios 实例。在此过程中设置一些全局配置选项，比如基础 URL 和默认头部信息： ```typescript import axios, { AxiosInstance } from 'axios'; const service: AxiosInstance = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000, }); export default service; ``` 这段代码片段展示了如何基于环境变量中的 API 地址来设定 Axios 请求的基础路径，并设置了超时时间以防止长时间无响应的情况发生。 ### 封装公共方法 对于常用的 HTTP 方法可以进一步封装成更易使用的函数形式，在 `src/api/request.ts` 中实现如下功能： ```typescript // src/api/request.ts import service from './index'; interface ResponseData<T> { code: number; message?: string; data?: T; } class RequestHandler { public async get<T>(url: string): Promise<ResponseData<T>> { try { const response = await service.get(url); return response.data as ResponseData<T>; } catch (error) { console.error(error); throw error; } } // Post method and others can be added here... } ``` 这里定义了一个通用的数据接口 `ResponseData` 用于统一处理服务器返回的结果结构，并实现了 GET 请求的方法作为例子展示[^4]。 ### 使用自定义 Axios 进行数据交互 最后可以在组件内部调用这些已经封装好的服务来进行实际的数据请求操作。例如在一个名为 `InstrumentProgress.vue` 的单文件组件里查询特定用户的仪器进度： ```javascript <script lang="ts"> import { defineComponent } from 'vue'; import request from '@/api/request'; export default defineComponent({ name: "InstrumentProgress", setup() { function fetchProgressByUser(user_number: number){ request.get<YourDataType>(`/api/progress/getInstrumentProgressByUserNumber?user_number=${user_number}`) .then(response => { // Handle success }) .catch(error => { // Handle errors }); }; return { fetchProgressByUser }; }, }); </script> ``` 以上就是关于如何在 Vue 3 + TypeScript 环境下安装和配置 Axios 的介绍。