CN114189559A - 基于Axios的接口重复请求处理方法及系统 - Google Patents

Abstract

本发明实施例提供了一种基于Axios的接口重复请求处理方法，所述方法包括：通过Axios拦截前端当前发送的第一接口请求；判断与第一接口请求相同的第二接口请求是否存在于预先创建的请求池中；当第二接口请求存在于请求池中时，根据第一接口请求的第一请求参数与第二接口请求的第二请求参数，判断是否根据第一接口请求发起请求。本发明根据是否存在相同的接口请求以及请求参数是否相同判断是否发起请求，能够避免大量的重复或仅参数有变化的接口同时发起请求，从而能够在保证用户体验的前提下，达到节流的效果，同时极大地降低服务器的并发压力。

Description

基于Axios的接口重复请求处理方法及系统

技术领域

本发明实施例涉及计算机数据处理领域，尤其涉及一种基于Axios的接口重复请求处理方法、系统、计算机设备及计算机可读存储介质。

背景技术

在前端开发过程中，经常会与后端进行交互，交互的媒介就是接口请求，也即XMLHttpRequest。由于接口请求是异步事件，大量的重复或仅参数有变化的接口同时发起请求，不仅会导致前端页面数据的紊乱，而且会增加服务器的并发压力。

针对该问题，行业内现有的解决方案通常是基于高性能的JavaScript实用工具库Lodash的debounced(去抖)函数及throttle(节流)函数，虽然能够解决大部分的高频且连续触发的事件，如：resize、scroll、mousemove、多次快速click等。但是，由于接口的返回时机无法掌控，防抖节流的延时时间只能根据行业经验设置，甚至由于设置的过短，从而达不到节流效果，过长则会降低用户的体验。另外，由于是基于函数的封装，要在每个使用的地方改造原事件，代码侵入性较高，使得针对现有的项目改造影响范围不可预测。

同时，目前行业解决方案在节流过程中，对于不太频繁变化的接口，超出预估节流时间后二次触发请求，仍然算是一种浪费。

发明内容

有鉴于此，本发明实施例的目的是提供一种基于Axios的接口重复请求处理方法、系统、计算机设备及计算机可读存储介质，以解决现有技术中对于不太频繁变化的接口，超出预估节流时间后二次触发请求，从而发生浪费的问题。

为实现上述目的，本发明实施例提供了一种基于Axios的接口重复请求处理方法，包括以下步骤：

通过Axios拦截前端当前发送的第一接口请求；

判断与所述第一接口请求相同的第二接口请求是否存在于预先创建的请求池中；

当所述第二接口请求存在于所述请求池中时，根据所述第一接口请求的第一请求参数与所述第二接口请求的第二请求参数，判断是否根据所述第一接口请求发起请求。

可选地，所述判断与所述第一接口请求相同的第二接口请求是否存在于预先创建的请求池中，包括：

获取所述第一接口请求以及所述请求池中的所有接口请求对应的url以及method；

将所述第一接口请求对应的url以及method分别与所述请求池中的每个接口请求对应的url以及method进行比较；

当所述第一接口请求对应的url以及method与所述请求池中的所述第二接口请求对应的url以及method分别相同时，则确定与所述第一接口请求相同的第二接口请求存在于所述请求池中；

否则确定与所述第一接口请求相同的第二接口请求不存在于所述请求池中。

可选地，所述方法还包括：

当所述第二接口请求不存在于所述请求池中时，则将所述第一接口请求写入至所述请求池中，并发起所述请求。

可选地，所述根据所述第一接口请求的第一请求参数与所述第二接口请求的第二请求参数，判断是否根据所述第一接口请求发起请求，包括：

判断所述第一请求参数与所述第二请求参数是否相同；

若所述第一请求参数与所述第二请求参数不相同，则取消所述第二接口请求；

将所述第一接口请求覆盖所述第二接口请求写入所述请求池中，并发起所述请求。

可选地，所述方法还包括：

若所述第一请求参数与所述第二请求参数相同，且所述第二接口请求正在请求中时，则直接返回取消请求的信息，不进行所述请求。

可选地，还包括基于所述Axios的响应拦截器，用于拦截接口请求对应的响应，所述方法还包括：

基于所述Axios的响应拦截器，将响应过的接口请求及对应的请求结果更新至所述请求池中。

可选地，所述取消所述第二接口请求，包括：

基于所述Axios生成取消所述第二接口请求的cancelToken，并将所述cancelToken写入至所述请求池中。

为实现上述目的，本发明实施例还提供了基于Axios的接口重复请求处理系统，包括：

拦截模块，用于通过Axios拦截前端当前发送的第一接口请求；

第一判断模块，用于判断与所述第一接口请求相同的第二接口请求是否存在于预先创建的请求池中；

第二判断模块，用于当所述第二接口请求存在于所述请求池中时，根据所述第一接口请求的第一请求参数以及所述第二接口请求的第二请求参数，判断是否根据所述第一接口请求发起请求。

为实现上述目的，本发明实施例还提供了一种计算机设备，所述计算机设备存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被处理器执行时实现如上所述的基于Axios的接口重复请求处理方法的步骤。

为实现上述目的，本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行如上所述的基于Axios的接口重复请求处理方法的步骤。

本发明实施例提供的基于Axios的接口重复请求处理方法、系统、计算机设备及计算机可读存储介质，通过判断请求池中是否存在与第一接口请求相同的第二接口请求，并当第二接口请求存在于请求池中时，根据第一接口请求的第一请求参数与第二接口请求的第二请求参数，判断是否根据第一接口请求发起请求，从而能够避免大量的重复或仅参数有变化的接口同时发起请求，从而能够在保证用户良好体验的前提下，达到节流的效果，同时极大地降低了服务器的并发压力。

附图说明

图1为本发明实施例提供的基于Axios的接口重复请求处理方法一种示例性的流程示意图。

图2为图1中步骤S200的一种示例性的具体流程示意图。

图3为图1中步骤S300的一种示例性的具体流程示意图。

图4为本发明提供的基于Axios的接口重复请求处理方法一种示例性的具体流程示意图。

图5为本发明实施例提供的基于Axios的接口重复请求处理系统的一种示例性的程序模块示意图。

图6为本发明实施例提供的计算机设备一种示例性的硬件结构示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明中的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)，是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”或“具有”及其任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其他步骤或单元。

为便于理解，下面对本发明实施例的具体内容进行描述。

以下实施例将以计算机设备2为执行主体进行示例性描述。

参阅图1，示出了本发明实施例一之基于Axios的接口重复请求处理方法的步骤流程图。可以理解，本方法实施例中的流程图不用于对执行步骤的顺序进行限定。具体如下：

步骤S100，通过Axios拦截前端当前发送的第一接口请求。

具体地，在前端开发过程中，前端经常会通过接口请求的方式与后端进行交互。当前端发送一个接口请求时，则通过Axios插件拦截该接口请求。当前端发送多个接口请求时，则所述Axios插件拦截到所述多个接口请求。

Axios是一个基于promise的超文本传输协议(Hypertext Transfer Protocol，HTTP)库，可以用在浏览器和node.js中，它封装了XMLHttpRequest，进行网络请求，可以拦截请求和响应。

需要说明的是，在执行接口重复请求处理方法之前，还封装统一聚合的请求入口函数，根据入参method调用所述Axios对应的方法，例如get、post等方法。所述通过Axios拦截的所有接口请求均通过该入口函数才能发起网络请求。

步骤S200，判断与所述第一接口请求相同的第二接口请求是否存在于预先创建的请求池中。

具体地，预先创建的请求池中保存有前端发起的历史接口请求，当所述Axios插件拦截到第一接口请求时，通过判断与所述第一接口请求相同的第二接口请求是否存在于预先创建的请求池中，可以从请求池中查找出与所述第一接口请求相同的第二接口信息，从而可以查找出重复或仅参数有变化的接口请求。

在示例性的实施例中，如图2所示，所述步骤S200可以包括：

步骤S201，获取所述第一接口请求以及所述请求池中的所有接口请求对应的url以及method。

步骤S202，将所述第一接口请求对应的url以及method分别与所述请求池中的每个接口请求对应的url以及method进行比较，以判断所述第一接口请求对应的url以及method与所述请求池中的所述第二接口请求对应的url以及method是否分别相同，若所述第一接口请求对应的url以及method与所述请求池中的所述第二接口请求对应的url以及method分别相同，则执行步骤S203，否则执行步骤S204。

步骤S203，确定与所述第一接口请求相同的第二接口请求存在于所述请求池中。

步骤S204，确定与所述第一接口请求相同的第二接口请求不存在于所述请求池中。

在具体实施例中，可以通过isInPool(url,method)判断与所述第一接口请求相同的第二接口请求是否存在于所述请求池中。

在示例性的实施例中，当接收到强制刷新页面的指令或者初次启动系统的指令时，创建所述请求池。所述请求池的创建过程，具体可以为：使用Javascript自定义一个Class类，初始化请求池，并设置全局缓存时间。

步骤S300，当所述第二接口请求存在于所述请求池中时，根据所述第一接口请求的第一请求参数与所述第二接口请求的第二请求参数，判断是否根据所述第一接口请求发起请求。

在实际应用中，当判断出所述第二接口请求存在与所述请求池中时，由于可能还存在大量仅参数有变化的接口同时发起请求的情况，此时还需根据请求参数的异同情况，进而判断是否根据第一接口请求发起请求。

在示例性的实施例中，如图3所示，所述步骤S300可以具体包括步骤S301～步骤S303：

步骤S301，判断所述第一请求参数与所述第二请求参数是否相同，若所述第一请求参数与所述第二请求参数不相同，则执行步骤S302，否则执行步骤S303。

步骤S302，取消所述第二接口请求，将所述第一接口请求覆盖所述第二接口请求写入所述请求池中，并发起所述请求。

具体地，在确定所述请求池中存在与所述第一接口请求相同的第二接口请求时，此时通过使用深度遍历法继续判断所述第二接口请求中的请求参数与所述第一接口请求参数是否相同，例如基于lodash.isEqual的封装函数isSameParams进行请求参数是否相同的判断，从而根据判断结果继续判断是否发起请求。需要说明的是，Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。

在实际应用中，经常会出现大量的重复或者仅参数有变化的接口同时发起请求，此时在判断出是相同接口请求后，此时还需判断请求参数是否发生变化，从而针对请求参数的判断结果确定是否发起请求。本案根据不同的判断结果确定是否发起请求，可以极大地降低服务器的并发压力，且当不发起请求时，从而减少响应，避免了前端页面的数据紊乱。

具体地，当所述第一请求参数与所述第二请求参数不相同时，基于Axios的canceltoken API从所述请求池中获取上一次请求的cancelToken，执行取消所述第二接口请求的动作，并根据所述第一接口请求发起请求，同时保存所述第一接口请求至所述请求池中。

步骤S303，判断所述第二接口请求是否正在请求中，并根据判断结果确定是否发起请求。

具体地，当所述第一请求参数与所述第二请求参数相同时，由于在请求的过程中，经常会发生多个接口请求并发请求的情况，此时需要判断所述第二接口请求是否正在执行还是已经执行完，并根据所述第二接口请求的执行情况确定是否发起请求。

在示例性的实施例中，所述步骤S303中根据判断结果确定是否发起请求，可以包括：

当所述第二接口请求正在请求中时，则直接返回取消请求的信息，不进行所述请求。

目前行业解决方案在节流过程中，当出现重复请求的情况时，直接禁止事件再次发生且无任何提示，上层用户无法感知，对用户体验和开发排查问题造成一定的困扰。本方案在实际应用中，当所述第一请求参数与所述第二请求参数相同，且所述第二接口请求正在请求时，则表示与所述第一接口请求相同的请求正在执行中，不做任何请求，并返回请求结果明确取消请求的信息。所述明确取消请求的信息可以根据需求自定义，例如错误信息，并将该错误信息发送至对应的上层应用，以提示用户或显示错误以供开发者进行错误定位，从而为用户提供良好的体验，同时为开发者排查问题提供极大的便利。

当所述第二接口请求结束时，则判断所述第二接口请求的请求结果是否存在于缓存期内，若所述第二接口请求的请求结果存在于所述缓存期内，且所述请求池中存在所述请求结果，则直接返回缓存的所述请求结果；若所述第二接口请求的请求结果不存在于所述缓存期内或者所述第二接口请求的请求结果存在于所述缓存期内但所述请求池中不存在所述请求结果，则清除所述第二接口请求，将所述第一接口请求写入所述请求池中，并发起请求。

需要说明的是，请求池中的数据以预设的数据结构进行存储，包括：所述第一接口请求的时间(也即现在时刻timestamp)、缓存时间(cacheTime)、是否正在请求(isPending)、请求参数(params:{xxx})、缓存结果(cacheResults)及取消请求的函数(cancelToken)。

当初始化所述请求池中的数据时，所述数据结构示例性为：

需要说明的是，当一个接口请求请求完毕后，请求结果均设有缓存期，以将所述请求结果在所述缓存期内保存至所述请求池中。所述缓存期时长可以在自定义请求池时自由设置。

本发明通过直接返回第二接口请求的响应消息或者从所述请求池中返回缓存的请求结果，能够加快响应速度，并极大地缓解服务器的高并发压力，从而达到节流的目的。

在示例性的实施例中，所述取消所述第二接口请求，包括：

基于Axios生成取消所述第二接口请求的cancelToken，并将所述cancelToken写入至所述请求池中。所述cancelToken用于取消接口请求。

在示例性的实施例中，还包括基于所述Axios的响应拦截器，用于拦截接口请求对应的响应，所述方法还包括：

基于所述Axios的响应拦截器，将响应过的接口请求及对应的请求结果更新至所述请求池中，以便下次接收到相同的接口请求时，在缓存有效期内直接将所述请求结果返回。

在实际应用中，示例性的代码如下：

在示例性的实施例中，所述方法还包括：

当所述第一接口请求的请求结束时，复位请求状态isPending，并将所述第一接口请求的请求结果更新保存至所述请求池中。

示例性地，所述更新结果，复位请求状态的代码可以为：

updateResults(config,res){}

通过将所述第一接口请求的请求结果更新保存至所述请求池中，以便在接收到与所述第一接口请求相同的请求且请求参数相同时，直接将所述请求结果发送至前端，能够加快响应速度，并极大地缓解服务器的高并发压力，从而达到节流的目的。

在示例性的实施例中，所述方法还包括：

当所述第二接口请求不存在于所述请求池中时，则将所述第一接口请求写入至所述请求池中，并发起所述请求。

示例性地，当所述第二接口请求不存在与所述请求池中时，则通过addToPool方法将所述第一接口请求存入至所述请求池中。

如图4所示，为本发明实施例提供的一种示例性的具体流程示意图。具体为：当接收到前端API发起接口请求时，将所述接口请求经过统一请求入口，以对该接口请求进行统一封装。当封装完毕后，判断该接口请求是否存在与请求池中：当不存在请求池中时，将本次请求存入请求池中，并发起请求；当存在请求池中时，继续判断两个接口请求的请求参数是否相同。当两个接口请求的请求参数不相同时，取消请求池中的请求，并将本次接口请求存入请求池中，并发起请求；当请求参数相同时，监测上一次的接口请求是否正在请求中。当上一次的接口请求正在请求中时，返回明确取消信息(message:驳回)；当上一次的接口请求不在请求中时，继续判断上一次的接口请求是否还在缓存期内。当上一次的接口请求，还在缓存期内时，继续判断是否有对应的缓存结果，若有则直接返回该缓存结果；若不在缓存期内或者在缓存期内，但没有对应的缓存结果，则将本次接口请求存入请求池中，并发起请求，直至请求结束。当然，所述请求池设置有定时轮询，清除已结束并已过缓存期的接口请求。同时，请求池还可以进行数据的初始化，并在发起请求时，补充cancelToken以取消对应的接口请求。当请求结束后，复位请求状态isPending，并补充请求结果cacheResults。

本发明实施例提供的基于Axios的接口重复请求处理方法，通过判断请求池中是否存在与第一接口请求相同的第二接口请求，并当第二接口请求存在于请求池中时，根据第一接口请求的第一请求参数与第二接口请求的第二请求参数，判断是否根据第一接口请求发起请求，从而能够避免大量的重复或仅参数有变化的接口同时发起请求，从而能够在保证用户良好体验的前提下，达到节流的效果，同时极大地降低了服务器的并发压力。

通过本发明，无需在原按钮或触发事件上进行任何的改动，代码侵入性较低，风险可控。无需设置预估阈值，在每次接口请求结束，无论成功还是失败，会自动复位请求池中的请求状态。通过加入策略分析，相同请求触发时，默认为重复事件，根据一定条件判断返回对应结果(缓存结果或驳回信息，或真正发起请求)。上一次没结束，但是下一次请求入参有变化，则认为用户确实操作了页面，那么则无人关心上一次请求的数据，可直接取消掉，再次发起本次的请求。

请继续参阅图5，示出了本发明基于Axios的接口重复请求处理系统的程序模块示意图。在本实施例中，基于Axios的接口重复请求处理系统20可以包括或被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本发明，并可实现上述基于Axios的接口重复请求处理方法。本发明实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，比程序本身更适合于描述基于Axios的接口重复请求处理系统20在存储介质中的执行过程。以下描述将具体介绍本实施例各程序模块的功能：

拦截模块200，用于通过Axios拦截前端当前发送的第一接口请求。

具体地，在前端开发过程中，前端经常会通过接口请求的方式与后端进行交互。当前端发送一个接口请求时，则通过Axios插件拦截该接口请求。当前端发送多个接口请求时，则所述Axios插件拦截到所述多个接口请求。

Axios是一个基于promise的超文本传输协议(Hypertext Transfer Protocol，HTTP)库，可以用在浏览器和node.js中，它封装了XMLHttpRequest，进行网络请求，可以拦截请求和响应。

需要说明的是，在执行接口重复请求处理方法之前，还封装统一聚合的请求入口函数，根据入参method调用所述Axios对应的方法，例如get、post等方法。所述通过Axios拦截的所有接口请求均通过该入口函数才能发起网络请求。

第一判断模块201，用于判断与所述第一接口请求相同的第二接口请求是否存在于预先创建的请求池中。

具体地，预先创建的请求池中保存有前端发起的历史接口请求，当所述Axios插件拦截到第一接口请求时，所述第一判断模块201通过判断与所述第一接口请求相同的第二接口请求是否存在于预先创建的请求池中，可以从请求池中查找出与所述第一接口请求相同的第二接口信息，从而可以查找出重复或仅参数有变化的接口请求。

在示例性的实施例中，所述第一判断模块201可以包括获取单元、比较单元及确定单元：

所述获取单元，用于获取所述第一接口请求以及所述请求池中的所有接口请求对应的url以及method。

所述比较单元，用于将所述第一接口请求对应的url以及method分别与所述请求池中的每个接口请求对应的url以及method进行比较，以判断所述第一接口请求对应的url以及method与所述请求池中的所述第二接口请求对应的url以及method是否分别相同。

所述确定单元，用于当所述第一接口请求对应的url以及method与所述请求池中的所述第二接口请求对应的url以及method分别相同时，确定与所述第一接口请求相同的第二接口请求存在于所述请求池中；否则，确定与所述第一接口请求相同的第二接口请求不存在于所述请求池中。

在具体实施例中，所述第一判断模块201可以通过isInPool(url,method)判断与所述第一接口请求相同的第二接口请求是否存在于所述请求池中。

在示例性的实施例中，当接收到强制刷新页面的指令或者初次启动系统的指令时，创建所述请求池。所述请求池的创建过程，具体可以为：使用Javascript自定义一个Class类，初始化请求池，并设置全局缓存时间。

第二判断单元202，当所述第二接口请求存在于所述请求池中时，根据所述第一接口请求的第一请求参数与所述第二接口请求的第二请求参数，判断是否根据所述第一接口请求发起请求。

在实际应用中，当判断出所述第二接口请求存在与所述请求池中时，由于可能还存在大量仅参数有变化的接口同时发起请求的情况，此时还需根据请求参数的异同情况，进而判断是否根据第一接口请求发起请求。

在示例性的实施例中，所述第二判断单元202可以具体包括第一判断单元及请求单元以及第二判断单元：

所述第一判断单元，用于判断所述第一请求参数与所述第二请求参数是否相同。

所述请求单元，用于当所述第一请求参数与所述第二请求参数不相同时，取消所述第二接口请求，将所述第一接口请求覆盖所述第二接口请求写入所述请求池中，并发起所述请求。

具体地，在确定所述请求池中存在与所述第一接口请求相同的第二接口请求时，此时通过使用深度遍历法继续判断所述第二接口请求中的请求参数与所述第一接口请求参数是否相同，例如基于lodash.isEqual的封装函数isSameParams进行请求参数是否相同的判断，从而根据判断结果继续判断是否发起请求。需要说明的是，Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。

在实际应用中，经常会出现大量的重复或者仅参数有变化的接口同时发起请求，此时在判断出是相同接口请求后，此时还需判断请求参数是否发生变化，从而针对请求参数的判断结果确定是否发起请求。本案根据不同的判断结果确定是否发起请求，可以极大地降低服务器的并发压力，且当不发起请求时，从而减少响应，避免了前端页面的数据紊乱。

具体地，当所述第一请求参数与所述第二请求参数不相同时，基于Axios的canceltoken API从所述请求池中获取上一次请求的cancelToken，执行取消所述第二接口请求的动作，并根据所述第一接口请求发起请求，同时保存所述第一接口请求至所述请求池中。

所述第二判断单元，用于当所述第一请求参数与所述第二请求参数相同，则判断所述第二接口请求是否正在请求中，并根据判断结果确定是否发起请求。

具体地，当所述第一请求参数与所述第二请求参数相同时，由于在请求的过程中，经常会发生多个接口请求并发请求的情况，此时需要判断所述第二接口请求是否正在执行还是已经执行完，并根据所述第二接口请求的执行情况确定是否发起请求。

在示例性的实施例中，所述第二判断单元，还可以用于：

当所述第二接口请求正在请求中时，则直接返回取消请求的信息，不进行所述请求。

目前行业解决方案在节流过程中，当出现重复请求的情况时，直接禁止事件再次发生且无任何提示，上层用户无法感知，对用户体验和开发排查问题造成一定的困扰。本方案在实际应用中，当所述第一请求参数与所述第二请求参数相同，且所述第二接口请求正在请求时，则表示与所述第一接口请求相同的请求正在执行中，不做任何请求，并返回请求结果明确取消请求的信息。所述明确取消请求的信息可以根据需求自定义，例如错误信息，并将该错误信息发送至对应的上层应用，以提示用户或显示错误以供开发者进行错误定位，从而为用户提供良好的体验，同时为开发者排查问题提供极大的便利。

当所述第二接口请求结束时，则判断所述第二接口请求的请求结果是否存在于缓存期内，若所述第二接口请求的请求结果存在于所述缓存期内，且所述请求池中存在所述请求结果，则直接返回缓存的所述请求结果；若所述第二接口请求的请求结果不存在于所述缓存期内或者所述第二接口请求的请求结果存在于所述缓存期内但所述请求池中不存在所述请求结果，则清除所述第二接口请求，将所述第一接口请求写入所述请求池中，并发起请求。

需要说明的是，请求池中的数据以预设的数据结构进行存储，包括：所述第一接口请求的时间(也即现在时刻timestamp)、缓存时间(cacheTime)、是否正在请求(isPending)、请求参数(params:{xxx})、缓存结果(cacheResults)及取消请求的函数(cancelToken)。

当初始化所述请求池中的数据时，所述数据结构示例性为：

需要说明的是，当一个接口请求请求完毕后，请求结果均设有缓存期，以将所述请求结果在所述缓存期内保存至所述请求池中。所述缓存期时长可以在自定义请求池时自由设置。

本发明通过直接返回第二接口请求的响应消息或者从所述请求池中返回缓存的请求结果，能够加快响应速度，并极大地缓解服务器的高并发压力，从而达到节流的目的。

在示例性的实施例中，所述取消所述第二接口请求，可以包括：

基于Axios生成取消所述第二接口请求的cancelToken，并将所述cancelToken写入至所述请求池中。所述cancelToken用于取消接口请求。

在示例性的实施例中，还包括基于所述Axios的响应拦截器，用于拦截接口请求对应的响应，所述系统还包括更新模块，用于：

基于所述Axios的响应拦截器，将响应过的接口请求及对应的请求结果更新至所述请求池中，以便下次接收到相同的接口请求时，在缓存有效期内直接将所述请求结果返回。

在实际应用中，示例性的代码如下：

在示例性的实施例中，所述系统还包括复位模块，用于：

当所述第一接口请求的请求结束时，复位请求状态isPending，并将所述第一接口请求的请求结果更新保存至所述请求池中。

示例性地，所述更新结果，复位请求状态的代码可以为：

updateResults(config,res){}

通过将所述第一接口请求的请求结果更新保存至所述请求池中，以便在接收到与所述第一接口请求相同的请求且请求参数相同时，直接将所述请求结果发送至前端，能够加快响应速度，并极大地缓解服务器的高并发压力，从而达到节流的目的。

在示例性的实施例中，所述系统还包括写入模块，用于：

当所述第二接口请求不存在于所述请求池中时，则将所述第一接口请求写入至所述请求池中，并发起所述请求。

示例性地，当所述第二接口请求不存在与所述请求池中时，则通过addToPool方法将所述第一接口请求存入至所述请求池中。

本发明实施例提供的基于Axios的接口重复请求处理系统，通过判断请求池中是否存在与第一接口请求相同的第二接口请求，并当第二接口请求存在于请求池中时，根据第一接口请求的第一请求参数与第二接口请求的第二请求参数，判断是否根据第一接口请求发起请求，从而能够避免大量的重复或仅参数有变化的接口同时发起请求，从而能够在保证用户良好体验的前提下，达到节流的效果，同时极大地降低了服务器的并发压力。

通过本发明，无需在原按钮或触发事件上进行任何的改动，代码侵入性较低，风险可控。无需设置预估阈值，在每次接口请求结束，无论成功还是失败，会自动复位请求池中的请求状态。通过加入策略分析，相同请求触发时，默认为重复事件，根据一定条件判断返回对应结果(缓存结果或驳回信息，或真正发起请求)。上一次没结束，但是下一次请求入参有变化，则认为用户确实操作了页面，那么则无人关心上一次请求的数据，可直接取消掉，再次发起本次的请求。

参阅图6，是本发明实施例提供的计算机设备的一种示例性的硬件架构示意图。本实施例中，所述计算机设备2是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。该计算机设备2可以是机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。如图6所示，所述计算机设备2至少包括，但不限于，可通过系统总线相互通信连接存储器21、处理器22、网络接口23、以及基于Axios的接口重复请求处理系统20。其中：

本实施例中，存储器21至少包括一种类型的计算机可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器21可以是计算机设备2的内部存储单元，例如该计算机设备2的硬盘或内存。在另一些实施例中，存储器21也可以是计算机设备2的外部存储设备，例如该计算机设备20上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，存储器21还可以既包括计算机设备2的内部存储单元也包括其外部存储设备。本实施例中，存储器21通常用于存储安装于计算机设备2的操作系统和各类应用软件，例如所述基于Axios的接口重复请求处理系统20的程序代码等。此外，存储器21还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器22在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器22通常用于控制计算机设备2的总体操作。本实施例中，处理器22用于运行存储器21中存储的程序代码或者处理数据，例如运行基于Axios的接口重复请求处理系统20，以实现上述的基于Axios的接口重复请求处理方法。

所述网络接口23可包括无线网络接口或有线网络接口，该网络接口23通常用于在所述计算机设备2与其他电子装置之间建立通信连接。例如，所述网络接口23用于通过网络将所述计算机设备2与外部终端相连，在所述计算机设备2与外部终端之间的建立数据传输通道和通信连接等。所述网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(Global System of Mobile communication，GSM)、宽带码分多址(WidebandCode Division Multiple Access，WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。

需要指出的是，图6仅示出了具有部件20-23的计算机设备2，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。

在本实施例中，存储于存储器21中的所述基于Axios的接口重复请求处理系统20还可以被分割为一个或者多个程序模块，所述一个或者多个程序模块被存储于存储器21中，并由一个或多个处理器(本实施例为处理器22)所执行，以完成本发明。

例如，图5示出了所述实现基于Axios的接口重复请求处理系统20的程序模块示意图，该实施例中，所述基于基于Axios的接口重复请求处理系统20可以被划分为拦截模块200、第一判断模块201、第二判断模块202。其中，本发明所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，比程序更适合于描述所述基于Axios的接口重复请求处理系统20在所述计算机设备2中的执行过程。所述程序模块200-202的具体功能在中已有详细描述，在此不再赘述。

本发明实施例还提供一种计算机可读存储介质，如闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘、服务器、App应用商城等等，其上存储有计算机程序，程序被处理器执行时实现相应功能。本实施例的计算机可读存储介质用于存储基于Axios的接口重复请求处理系统20，被处理器执行时实现的基于Axios的接口重复请求处理方法。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种基于Axios的接口重复请求处理方法，其特征在于，所述方法包括：

通过Axios拦截前端当前发送的第一接口请求；

判断与所述第一接口请求相同的第二接口请求是否存在于预先创建的请求池中；

当所述第二接口请求存在于所述请求池中时，根据所述第一接口请求的第一请求参数与所述第二接口请求的第二请求参数，判断是否根据所述第一接口请求发起请求。

2.根据权利要求1所述的基于Axios的接口重复请求处理方法，其特征在于，所述判断与所述第一接口请求相同的第二接口请求是否存在于预先创建的请求池中，包括：

获取所述第一接口请求以及所述请求池中的所有接口请求对应的url以及method；

将所述第一接口请求对应的url以及method分别与所述请求池中的每个接口请求对应的url以及method进行比较；

当所述第一接口请求对应的url以及method与所述请求池中的所述第二接口请求对应的url以及method分别相同时，则确定与所述第一接口请求相同的第二接口请求存在于所述请求池中；

否则确定与所述第一接口请求相同的第二接口请求不存在于所述请求池中。

3.根据权利要求1或2所述的基于Axios的接口重复请求处理方法，其特征在于，所述方法还包括：

当所述第二接口请求不存在于所述请求池中时，则将所述第一接口请求写入至所述请求池中，并发起所述请求。

4.根据权利要求1或2所述的基于Axios的接口重复请求处理方法，其特征在于，所述根据所述第一接口请求的第一请求参数与所述第二接口请求的第二请求参数，判断是否根据所述第一接口请求发起请求，包括：

判断所述第一请求参数与所述第二请求参数是否相同；

若所述第一请求参数与所述第二请求参数不相同，则取消所述第二接口请求；

将所述第一接口请求覆盖所述第二接口请求写入所述请求池中，并发起所述请求。

5.根据权利要求4所述的基于Axios的接口重复请求处理方法，其特征在于，所述方法还包括：

若所述第一请求参数与所述第二请求参数相同，且所述第二接口请求正在请求中时，则直接返回取消请求的信息，不进行所述请求。

6.根据权利要求3或4所述的基于Axios的接口重复请求处理方法，其特征在于，还包括基于所述Axios的响应拦截器，用于拦截接口请求对应的响应，所述方法还包括：

基于所述Axios的响应拦截器，将响应过的接口请求及对应的请求结果更新至所述请求池中。

7.根据权利要求4所述的基于Axios的接口重复请求处理方法，其特征在于，所述取消所述第二接口请求，包括：

基于所述Axios生成取消所述第二接口请求的cancelToken，并将所述cancelToken写入至所述请求池中。

8.一种基于Axios的接口重复请求处理系统，其特征在于，包括：

拦截模块，用于通过Axios拦截前端当前发送的第一接口请求；

第一判断模块，用于判断与所述第一接口请求相同的第二接口请求是否存在于预先创建的请求池中；

第二判断模块，用于当所述第二接口请求存在于所述请求池中时，根据所述第一接口请求的第一请求参数以及所述第二接口请求的第二请求参数，判断是否根据所述第一接口请求发起请求。

9.一种计算机设备，所述计算机设备存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的基于Axios的接口重复请求处理方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行如权利要求1至7中任一项所述的基于Axios的接口重复请求处理方法的步骤。

Images