vue3 ts如何获取后端数据

在Vue 3中结合TypeScript（简称TS），获取后端数据通常会涉及以下几个步骤：

1. 安装依赖：首先你需要安装axios库，用于发起HTTP请求，以及`@types/axios`提供TypeScript支持。可以通过npm或yarn命令行工具安装：

   npm install axios @types/axios
   // 或者
   yarn add axios typescript

2. 引入配置：在项目中创建一个axios实例，并配置基础URL（如果需要的话）：

   import axios from 'axios';

   const service = axios.create({
     baseURL: process.env.BASE_API || 'http://your-backend-url.com', // API地址
     timeout: 5000, // 请求超时时间
     headers: { 'Content-Type': 'application/json' } // 默认请求头
   });

3. 创建组件：在你的组件里，你可以使用`async`和`await`关键字来异步获取数据，定义一个data()函数返回一个Promise：

   export default {
     data() {
       return {
         loading: false,
         error: null,
         items: [] as any[], // 使用any类型占位，直到后端数据结构确定
       };
     },
     async mounted() {
       try {
         this.loading = true;
         const response = await service.get('/api/items'); // 替换为实际的API路径
         if (response.data) {
           this.items = response.data; // 将响应数据赋值给items
         } else {
           this.error = 'Failed to fetch data';
         }
         this.loading = false;
       } catch (error) {
         this.error = error.message;
         this.loading = false;
       }
     },
   };

4. 类型提示：为了让IDE更好地理解你的数据类型，可以对从后端返回的数据进行类型定义，例如：

   interface ItemResponse {
     data: Array<Item>;
   }
   type Item = {
     id: number;
     name: string;
     // 其他字段...
   };

   // 在接口回调中指定返回值类型
   const response: ItemResponse = await service.get<Item[]>('/api/items');