TypeScript高级内容

Jorah

已于 2024-09-27 23:25:00 修改

阅读量611

点赞数 22

文章标签： typescript javascript 前端

于 2024-09-27 22:40:47 首次发布

本文链接：https://blog.csdn.net/Jorah/article/details/142603877

版权

完整总结

本节课涵盖了本地开发环境的搭建、前后端的基本交互、以及如何封装 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 来优化代码结构，使其更加安全、简洁且易于维护。在解决代码问题的过程中，学会了如何排查和处理常见的前后端交互问题，使得开发过程更加顺畅。