vue3使用ts发送请求

Vue 3 结合 TypeScript 发送 HTTP 请求通常使用 Axios 库，因为它是支持 Promise 的 HTTP 客户端，易于使用，并且可以通过类型定义文件支持 TypeScript。以下是一个使用 Axios 在 Vue 3 项目中发送请求的基本示例：

1. 首先，你需要安装 Axios。如果尚未安装，可以在项目目录中运行以下命令来安装：

   npm install axios

2. 在你的 Vue 组件中导入 Axios：

   import axios from 'axios';

3. 使用 Axios 发送请求。例如，你可以在组件的 `setup` 函数或者 `methods` 对象中进行操作：

   <script lang="ts">
   import { defineComponent } from 'vue';
   import axios from 'axios';

   export default defineComponent({
     name: 'MyComponent',
     setup() {
       const fetchData = async () => {
         try {
           const response = await axios.get('https://api.example.com/data');
           console.log(response.data);
           // 处理返回的数据
         } catch (error) {
           console.error('There was an error!', error);
         }
       };

       // 调用函数发送请求
       fetchData();

       // 如果在模板中使用，需要返回这个函数，以便在模板的事件处理器中调用
       return {
         fetchData,
       };
     },
   });
   </script>

在这个示例中，我们创建了一个名为 `fetchData` 的异步函数，使用 `axios.get` 方法发送了一个 GET 请求到指定的 API 端点。通过 `try...catch` 语句来处理请求成功和错误的情况。

确保你的 Vue 项目已经正确配置了 TypeScript，这通常是通过创建 Vue 3 项目时使用 Vue CLI 或 Vite，并选择 TypeScript 作为语言选项来完成的。