详解vue axios二次封装

近期项目中，Vue 的使用愈发频繁。

对于 Vue 的爱好者来说，axios 作为后端交互的利器，更是不可或缺。而今天，我想与大家分享关于 Vue 中 axios 的二次封装的相关知识点和实践经验。如果你对此感兴趣，那么接下来的内容或许能为你带来启发与收获。

axios 是一个基于 promise 的 HTTP 库，可以用于浏览器和 node.js 中发起 HTTP 请求。Vue 项目中经常需要对其进行二次封装，以满足项目特定的需求。例如，全局配置请求头、错误处理等。接下来，我会详细阐述二次封装的过程，并提供一些实例代码供读者参考。

在 Vue 项目中，我们首先需要在 main.js 文件中引入 axios 库。然后，我们可以创建一个新的文件（如 api.js），在其中进行 axios 的二次封装。我们可以自定义请求函数，用于处理请求的通用逻辑，例如添加请求头、设置请求超时等。我们还可以定义响应处理函数，用于处理响应数据、错误处理等。通过这种方式，我们可以将复杂的请求逻辑封装起来，使得在其他组件中使用 axios 时更加简洁和方便。

除了基本的配置外，我们还可以添加一些实用的功能，如（interceptors）。通过，我们可以在请求发送前或响应返回后执行一些操作，例如验证 token 是否有效、处理响应数据格式等。这使得我们的代码更加灵活和可维护。

我们还可以利用 Vue 的插件机制，将 axios 集成到 Vue 中，使得在任何组件中都可以方便地使用 axios 进行后端交互。这大大简化了项目的开发流程，提高了开发效率。

定义公共参数与引入组件

我们从axios开始，一个广泛使用的HTTP客户端库。同时引入了qs库，用于处理URL查询字符串。

为了优化请求和响应的处理，我们为axios设置了。在请求发出前，我们可以显示加载动画，而在响应返回后，隐藏加载动画。

接下来，我们定义了两个函数：errorState和suessState，用于处理错误和成功的响应。在网络异常时，我们会提示用户。我们统一处理后端返回的错误码，根据错误码显示相应的提示信息。

封装http请求

我们封装了一个httpServer函数，接收请求的配置和数据作为参数。在此函数中，我们定义了一些公共参数和http默认配置。根据请求的方法（get或post），我们设置不同的headers。然后，我们使用axios发送请求，并在响应返回时调用suessState或errorState函数。

封装理由

封装的目的是为了方便后续的使用和维护。我们可以和后端商量好错误码的处理方式，统一提示和处理。如果需要进行接口全报文加解密，也可以在此处理。

接口统一归类

我们将所有的接口统一归类在ApiSetting中，便于后期的维护和升级。当接口需要升级或名称更改时，只需要在此处进行修改，而不需要在代码中逐一查找和修改。

http调用示例

在组件中，我们可以轻松地使用封装的http函数进行请求。例如，获取地理位置的接口，我们只需要调用http函数，传入相应的配置和数据即可。在响应返回时，我们可以在then中处理成功的情况，在catch中处理错误的情况。

封装的http请求不仅使代码更加简洁易懂，还提高了代码的可维护性。通过统一处理错误码、归类接口等方式，我们为项目打下了坚实的基础。这种封装方式也便于后期功能的扩展和优化。