vue axios基于常见业务场景的二次封装的实现

Vue Axios二次封装实践：基于业务场景的通用请求服务

随着网络技术的飞速发展，前端框架如Vue和React广泛应用在各种Web应用中。其中，axios作为基于Promise的HTTP库，因其简单易用和强大的功能，被众多项目作为网络请求的首选库。今天，我将为大家分享一个基于Vue和axios的二次封装实践，特别是在常见业务场景下的应用。长沙网络推广认为这是一个很好的实践，现在将其分享给大家，希望能给大家带来一些启示。

让我们来了解一下axios。axios是一个基于Promise的HTTP客户端，可以用于浏览器和node.js环境。它具有简单易用、支持Promise API、能拦截请求和响应等诸多优点。在Vue等前端框架中，axios广泛应用于各种网络请求场景。

在最近的几个项目中，我基于axios根据常见的业务场景封装了一个通用的request服务。安装axios非常简单，可以通过npm、bower或者CDN的方式引入。接下来，让我们来看看那些常见的业务场景。

1. 全局请求配置：包括超时时间、请求头设置等基础配置。

2. GET、POST、PUT、DELETE等请求的Promise封装：简化日常开发中的网络请求操作。

3. 全局请求状态管理：用于控制加载动画等页面元素的显示与隐藏。

4. 路由跳转时的请求取消：避免因页面跳转导致的无效请求。

5. 请求携带Token：方便后端进行权限校验。

接下来，我们来看一下默认配置和自定义配置的介绍。我们可以通过axios.defaults设置全局默认配置，如超时时间、请求头等。我们也可以创建axios实例，并设置实例的默认配置。自定义配置的优先级高于默认配置。

我们还可以使用请求和响应来增强axios的功能。在请求中，我们可以做很多事情，如记录请求的URL、控制loading状态、添加Token等。在响应中，我们可以处理响应数据，如删除请求列表中的当前请求、管理loading状态、统一处理权限认证错误等。

通过以上实践，我们可以发现基于Vue和axios的二次封装可以大大提高开发效率和代码复用率。希望这个分享能给大家带来一些启示，也欢迎大家提出宝贵的建议和反馈。一起跟随长沙网络推广，更多的前端技术吧！

请求处理与拦截

一、请求响应与取消处理

在项目中，对于网络请求的处理至关重要。当响应返回后，需要从请求列表中删除相应的请求。当所有请求结束时，加载动画也应随之结束。对于取消的请求和网络请求失败，需要分别处理。

二、Promise封装及取消请求

为了更方便地处理请求，我们使用了axios库，并对其进行了封装。通过`CancelToken`实现了请求的取消功能。

我们创建了一个`request`函数，它接受URL、参数、配置和方法作为参数，并返回一个新的Promise。在这个函数中，我们使用了axios的`cancelToken`来创建一个取消令牌，并将其存入一个列表`sources`中。这个列表将被用于全局路由守卫，以便在路由变化时取消当前页面的网络请求。

我们还定义了两个函数`post`和`get`，它们是对`request`函数的简化调用，分别用于发送POST和GET请求。

三、全局路由守卫与请求取消

在`router.js`中，我们使用了全局路由守卫。在路由发生变化时，我们会遍历`sources`列表，并调用每个取消函数来取消当前的页面网络请求。然后清空`sources`列表，继续执行下一个路由。

四、request.js完整代码及其

在`request.js`中，我们引入了axios库并设置了一些默认配置。然后，我们定义了自定义来处理请求和响应。在请求中，我们将每个请求的URL添加到`requestList`中，并设置全局加载状态。在响应中，我们从`requestList`中删除相应的请求，并在所有请求结束时结束加载动画。如果响应是认证失效的错误，我们显示一个提示用户重新登录的提示框。

```javascript

// request.js

import axios from 'axios';

import store from '../store'; // 假设是一个用于状态管理的库

import router from '../router'; // 假设是项目的路由对象

import { CancelToken } from 'axios'; // 引入axios的CancelToken API用于取消请求

const CancelSource = axios.CancelToken.source(); // 创建取消源对象用于后续的取消操作

let requestList = []; // 存储所有发出的请求URL列表

const sources = []; // 存储所有的cancel token实例供全局路由守卫使用并导出供其他模块使用

const request = function (url, params, config, method) { / ... / }; // 定义请求的封装函数（省略具体实现细节）

const post = / ... /; // 定义post请求的封装函数（省略具体实现细节）

在网络的世界里，每一次请求都像是一次冒险之旅。为了应对可能出现的各种情况，我们需要做好充分的准备和应对。在这里，我们介绍一种基于axios的强大工具，它可以帮助我们更好地管理网络请求，无论是在登录页面还是在其他地方。

当我们在浏览器中按下登录按钮时，背后的代码正在默默地进行着一场网络舞蹈。我们通过router.push('/login')跳转到登录页面。接下来，我们会发起一个网络请求，可能是向服务器请求数据或发送信息。这个过程需要一个可靠的交通工具——我们的请求函数。

我们的请求函数就像一个灵活的使者，能够根据不同的需求，以不同的方式传递信息。无论是POST还是GET请求，我们都可以使用自定义的request函数来轻松完成。这个函数就像一个聪明的调度员，它会根据我们提供的URL、参数和配置信息，合理安排每一次请求的发送。

在网络请求的过程中，我们还需要考虑一些意外情况。比如，请求被取消或者网络请求失败等。为了应对这些情况，我们引入了CancelToken和一系列的处理机制。当请求被取消时，我们会抛出一个axios.Cancel，并提示“cancel request”。如果是网络请求失败，我们会通过window.$toast显示一个错误提示，并处理相应的错误。我们还会对请求列表进行清空操作，并将全局状态改为非加载状态。

为了更好地管理这些请求，我们还定义了一些辅助函数，如post和get。这些函数可以根据不同的需求，方便地发起不同类型的网络请求。我们还导出了一个sources数组，用于存储所有的请求源，方便进行请求的取消等操作。

这些代码就像一支精心编排的交响乐，各个部分协同工作，共同完成了网络请求的发送和处理过程。希望这些代码能够对大家的学习有所帮助，也希望大家能够在实际的项目中加以应用，更好地掌握网络请求的发送和处理技巧。也希望大家能够支持我们的狼蚁SEO，一起更多的技术奥秘。

现在，让我们用Cambrian渲染这段文字，展现它的魅力吧！让我们一起感受网络世界的奇妙和无限可能！