TypeScript高级内容
完整总结
本节课涵盖了本地开发环境的搭建、前后端的基本交互、以及如何封装 Axios 以增强代码的安全性和可维护性。此外，我们还解决了在代码实现过程中可能遇到的一些常见问题。
1. 本地环境搭建
- 安装环境依赖：首先需要在本地安装 Node.js（推荐最新稳定版），并全局安装 Vite。通过 Vite 创建 Vue 3 + TypeScript 项目，安装相关依赖后，启动开发服务器进行调试。
- Vue 单文件组件 (SFC)：我们在
src/components/HelloWorld.vue中看到，Vue 的单文件组件将组件的逻辑、模板和样式封装在一个文件内，便于管理和维护。
2. 使用 Axios 进行网络请求
- 引入 Axios：在项目中引入 Axios 库，并通过 GET 和 POST 方法与 FastAPI 后端进行通信。示例代码展示了如何在 TypeScript 环境下进行网络请求，并处理返回的数据。
- FastAPI 后端搭建：使用 Python 3.10.5 及以上版本搭建 FastAPI 后端，配置 CORS 中间件以支持跨域访问，并通过 Uvicorn 运行应用。在启动 FastAPI 后端时需要注意，0.0.0.0 不是一个具体的 IP 地址，访问时需使用
http://127.0.0.1:8009或http://localhost:8009。
3. 代码问题与解决方案
在实践中，遇到了一些常见的代码问题，包括：
-
网络请求无法访问后端：通常这是由于错误的 IP 地址引起的。通过使用本地 IP 地址 (
127.0.0.1) 或localhost解决该问题。 -
GET 和 POST 请求的正确配置：在封装 Axios 时，通过
params参数传递 GET 请求的 URL 参数，确保在请求发出时这些参数能够正确传递给后端。 -
前后端交互不成功：检查前端 Axios 请求和后端 FastAPI 路由是否正确匹配，确保请求路径和参数格式一致。
4. 封装 Axios
为了克服 Axios 原生用法中的一些局限性，并更好地支持 TypeScript 的类型检查与语法提示，进行了以下封装工作：
- 统一处理请求头：在
axios.create方法中创建 Axios 实例对象，并设置全局的请求和响应拦截器，以确保请求头统一处理。 - 统一管理接口：在
request文件夹中添加api.ts文件，集中管理所有接口，避免每次请求都重新加载接口文件。 - 避免回调地狱：通过封装异步请求，结合
async/await语法，使代码结构更加清晰，避免传统回调方法带来的复杂性。
5. TypeScript 与 Axios 的结合
- 类型声明：Axios 提供了完整的类型声明，通过泛型参数
T、R和D，分别定义服务器返回的数据类型、经过 Axios 包装后的响应对象类型，以及请求配置对象的类型。 - 封装 Axios 实例：通过
axios.create方法创建实例，设置请求和响应拦截器，处理全局的请求配置与错误响应。 - 模块化接口管理：将请求接口根据业务模块划分到不同的文件中（如
user/api.ts），并在组件中调用这些封装好的接口，实现代码的高内聚与低耦合。
6. 前端与后端的交互
- 示例实现：在 Vue 组件中，通过按钮点击触发 Axios 请求，使用封装后的接口函数发送请求，并在控制台输出服务器返回的数据。通过 GET 请求从 FastAPI 后端获取数据，或通过 POST 请求发送数据到后端。
结论
通过本节课的学习，不仅学会了如何在本地搭建 Vue 3 + TypeScript 的开发环境，还掌握了与 FastAPI 后端的交互方式。更重要的是，了解了如何通过封装 Axios 来优化代码结构，使其更加安全、简洁且易于维护。在解决代码问题的过程中，学会了如何排查和处理常见的前后端交互问题，使得开发过程更加顺畅。