vue3 ts axios

Vue 3 和 TypeScript 结合使用可以提供更强大、类型安全的开发体验。Axios 是一款流行的基于 Promise 的 HTTP 客户端库，常用于前端 JavaScript 应用程序中与 API 交互。

在 Vue 3 中，你可以使用 Axios 提供的数据请求功能，并通过 TypeScript 来添加类型注解，这有助于开发者编写更清晰、无误的代码。以下是基本步骤：

1. **安装**：首先，在你的 Vue 项目中安装 Axios 和 TypeScript 支持：

   npm install axios typescript --save

2. **配置 Axios**：在 `src/main.ts` 或 `main.js` 中导入 Axios 并配置默认的实例，例如：

   import axios from 'axios';
   const service = axios.create({
     baseURL: process.env.BASE_API,
     timeout: 5000, // 请求超时时间
     headers: { 'Content-Type': 'application/json' },
   });
   // 如果需要，可以设置全局拦截器等

3. **在组件中使用**：创建一个 TypeScript 接口描述预期的响应数据类型，然后在 methods 中使用 Axios 发送 GET、POST 等请求：

   interface ResponseData {
     message: string;
   }
   
   export default {
     data() {
       return {
         loading: false,
         error: null,
       };
     },
     methods: {
       fetchData(): void {
         this.loading = true;
         service.get('/api/data')
           .then((response: AxiosResponse<ResponseData>) => {
             this.loading = false;
             if (response.data) {
               console.log(response.data.message);
             } else {
               this.error = response.message;
             }
           })
           .catch((error) => {
             this.loading = false;
             this.error = error.message;
           });
       },
     },
   }