从零到一：构建可复用的 Axios 请求封装
在自学前端开发的初期，我开始尝试与接口进行数据交互。有一天，一位大佬审查我的代码时，令他震惊的是，我的接口分散在各自的文件中，密密麻麻，没有统一规范，管理起来非常不便，更不用说进行全局控制了。这段经历让我意识到，规范化和统一管理接口是提升代码质量和开发效率的关键。
总而言之，作为生产环境前端代码的 ITer，应该都脱离不了异步接口请求，那么接口请求的封装是必经之路。
没有任何的二次封装
在某种程度上，这种做法确实没有问题，也可以增加代码的可读性，便于控制当前文件下的接口。然而，问题来了，如果是在中大型项目中，单个接口的数量达到百个以上，如果每个页面都按照这种方式开发，不仅会增加项目的负担，而且后期维护也会变得非常麻烦。这让我意识到，面对大型项目，规范化和集中管理接口是提升代码质量和开发效率的关键。
二次封装使用示例
在下方示例中，我们采用了 Vue 和 TypeScript 技术栈，并进行了 Axios 的二次封装，加上 API 的统一管理，这样页面中可以直接调用接口，便于管理与开发。以下是一个具体的实现示例：
封装思路？为什么要这么封装？
为了便于阅读前的朋友您更直观的理解，附下方流程图：
在前端开发中，一个完整的请求流程通常可以分为三个主要部分：
1.求进入请求拦截前： 在请求发出之前，可以在请求拦截器中进行一些预处理操作，例如添加请求头、参数处理、权限验证等。
2.真正发起的请求： 这是实际向服务器发送请求的过程。
3.请求从响应拦截出来后： 在响应拦截器中处理服务器返回的数据，可以对响应进行统一处理，例如错误处理、数据格式化等。
拦截器
拦截器分为两类，一类是请求拦截，另一类是响应拦截，分别处理不同的情况。
请求拦截器
在请求发送到服务器之前，可以进行一些预处理操作，例如请求调整、添加用户标识等。
1.请求调整：可以在请求拦截器中调整请求配置，例如添加统一的请求参数或修改请求头。
2.用户标识：可以在请求头中添加用户标识，例如 Token 或 Session ID，用于认证和授权。
响应拦截器
在接收到服务器响应后，但在传递给应用程序之前，可以进行一些处理操作，例如网络错误处理、授权错误处理等。
- 网络错误处理：处理网络请求失败的情况，例如断网或服务器不可用。
- 授权错误处理：处理由于认证或授权失败导致的请求错误，例如 Token 过期或无权限访问。
- 普通错误处理：处理其他通用的请求错误，例如请求参数错误或服务器内部错误。
- 代码异常处理：捕获并处理代码执行中的异常，防止程序崩溃。
全局API管理
随着我们的 API 不断增加，我们可能需要对它们进行不同的分类。然而，我们又不希望每次调用都需要从不同的文件夹引入不同的 API。因此，在基础请求和拦截器之外，我们还需要进行封装操作，以便更加便捷地管理和调用这些 API。
具体详细使用方法可参考掘金大佬juejin.cn/post/712457…
