一种单页面应用的接口数据获取方法、装置及存储介质与流程

本发明涉及web前端设计技术领域，尤其是一种单页面应用的接口数据获取方法、装置及存储介质。

背景技术：

通常在单页面应用中，每个页面的接口请求需要等到该页面的路由js加载完成并渲染后才开始发起，如在路由js(javascript)加载完成之后进行路由页面挂载，进而在路由页面挂载完成后进行接口请求，这不仅会导致页面渲染产生较明显的抖动，而且会让用户感觉到页面加载缓慢。

目前通过采用服务器端渲染(serversiderendering，ssr)技术，将组件或页面通过服务器生成html字符串，然后发送到浏览器，最后将静态标记“混合”为客户端上完全交互的应用程序。或者通过服务器端渲染技术将一些可预加载的数据提前打到全局变量里使用。但是，采用上述方案仅仅可以解决首屏访问的页面白屏问题，在继续访问其他页面时依然会存在先加载路由js且渲染页面后再进行接口请求所导致的页面抖动的情况，而且还会增加服务器的运行成本和学习成本，并且使得web前端开发条件受限。

技术实现要素：

有鉴于此，本发明实施例提供了一种单页面应用的接口数据获取方法，能够达到减少接口请求的请求时长，提高路由页面中接口数据的获取及展示效率的目的。

依据本发明实施例的一方面，提供了一种单页面应用的接口数据获取方法，包括：

在路由脚本文件加载时，基于预先配置的所述路由脚本文件对应的路由页面接口所需参数向服务端发送接口预请求；

接收所述服务端针对所述接口预请求返回的接口数据，将所述接口数据进行缓存；

若所述路由页面挂载完成且准备发出接口请求，从缓存的接口数据中查找所述接口请求对应的接口数据；

将查找到的所述接口请求对应的接口数据进行提取，并应用于所述路由页面中。

可选地，基于预先配置的所述路由脚本文件对应的路由页面接口所需参数向服务端发送接口预请求之后，还包括：

将接口预请求对应的预请求状态进行缓存，其中，所述预请求状态包含预请求完成或预请求进行中。

可选地，将查找到的所述接口请求对应的接口数据进行提取，包括：

若查找到接口请求对应的接口数据，分析缓存的所述接口预请求对应的预请求状态是否为预请求完成；

若所述预请求状态是预请求完成，将查找到的所述接口请求对应的接口数据进行提取；

若所述预请求状态不是预请求完成，在指定时间内等待所述预请求状态变为预请求完成后将查找到的所述接口请求对应的接口数据进行提取。

可选地，预先配置的所述路由脚本文件对应的路由页面接口所需参数，包括：

接口所在路由页面名称、接口唯一标识、接口路径中的至少一项。

可选地，所述从缓存的接口数据中查找所述接口请求对应的接口数据，包括：依据请求接口的接口唯一标识、接口路径中的至少一项从缓存的接口数据中查找所述接口请求对应的接口数据。

可选地，将所述接口数据进行缓存之前，还包括：基于所述路由页面上需预请求的接口对应的接口数据内容的变化频率配置接口数据的缓存时间。

可选地，所述从缓存的接口数据中查找所述接口请求对应的接口数据之后，还包括：若从缓存的接口数据中未查找到所述接口请求对应的接口数据，将所述接口请求发送至所述服务端；接收服务端针对所述接口请求返回的接口数据并应用于所述路由页面中。

依据本发明实施例的另一方面，还提供了一种单页面应用的接口数据获取装置，包括：

发送模块，适于在路由脚本文件加载时，基于预先配置的所述路由脚本文件对应的路由页面接口所需参数向服务端发送接口预请求；

缓存模块，适于接收所述服务端针对所述接口预请求返回的接口数据，将所述接口数据进行缓存；

查找模块，适于若所述路由页面挂载完成且准备发出接口请求，从缓存的接口数据中查找所述接口请求对应的接口数据；

提取模块，适于将查找到的所述接口请求对应的接口数据进行提取，并应用于所述路由页面中。

可选地，所述缓存模块还适于：

将接口预请求对应的预请求状态进行缓存，其中，所述预请求状态包含预请求完成或预请求进行中。

可选地，所述提取模块还适于：

若查找到接口请求对应的接口数据，分析缓存的所述接口预请求对应的预请求状态是否为预请求完成；

若所述预请求状态是预请求完成，将查找到的所述接口请求对应的接口数据进行提取；

若所述预请求状态不是预请求完成，在指定时间内等待所述预请求状态变为预请求完成后将查找到的所述接口请求对应的接口数据进行提取。

可选地，预先配置的所述路由脚本文件对应的路由页面接口所需参数，包括：接口所在路由页面名称、接口唯一标识、接口路径中的至少一项。

所述查找模块还适于：依据请求接口的接口唯一标识、接口路径中的至少一项从缓存的接口数据中查找所述接口请求对应的接口数据。

可选地，所述装置还包括配置模块，适于基于所述路由页面上需预请求的接口对应的接口数据内容的变化频率配置接口数据的缓存时间。

所述装置还包括接收模块；所述发送模块，还适于若从缓存的接口数据中未查找到所述接口请求对应的接口数据，将所述接口请求发送至所述服务端；所述接收模块，适于接收服务端针对所述接口请求返回的接口数据并应用于所述路由页面中。

依据本发明实施例的又一方面，还提供了一种计算机可读存储介质，存储有计算机程序代码，当所述计算机程序代码在计算设备上运行时，导致所述计算设备执行上文任意实施例所述的单页面应用的接口数据获取方法。

依据本发明实施例的再一方面，还提供了一种计算设备，包括：处理器；存储有计算机程序代码的存储器；当所述计算机程序代码被所述处理器运行时，导致所述计算设备执行上文任意实施例所述的单页面应用的接口数据获取方法。

本发明实施例中，在路由脚本文件开始加载时，充分利用路由脚本文件加载的时间，同步地基于预先配置的路由脚本文件对应的路由页面接口所需参数向服务端发送接口预请求，并将返回的接口数据进行缓存，从而在后续准备发送接口请求时可以直接、快速地获取到缓存的接口数据，有效地减少了路由页面挂载时发起的接口请求的等待时长，避免了由于路由页面中接口数据获取过慢导致的抖动问题，提高了用户浏览页面的体验。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

根据下文结合附图对本发明具体实施例的详细描述，本领域技术人员将会更加明了本发明的上述以及其他目的、优点和特征。

附图说明

构成说明书的一部分的附图描述了本发明的实施例，并且连同描述一起用于解释本发明的原理。

参照附图，根据下面的详细描述，可以更加清楚地理解本发明，其中：

图1示出了本发明一实施例的单页面应用的接口数据获取方法的流程示意图；

图2示出了本发明另一实施例的单页面应用的接口数据获取方法的流程示意图；

图3示出了本发明一实施例的单页面应用的接口数据获取过程的整体流程示意图；

图4示出了本发明一实施例的单页面应用的接口数据获取装置的结构示意图；以及

图5示出了本发明另一实施例的单页面应用的接口数据获取装置的结构示意图。

具体实施方式

现在将参照附图来详细描述本发明的各种示例性实施例。应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本发明的范围。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为说明书的一部分。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

本发明实施例可以应用于计算机系统/服务器，其可与众多其它通用或专用计算系统环境或配置一起操作。适于与计算机系统/服务器一起使用的众所周知的计算系统、环境和/或配置的例子包括但不限于：个人计算机系统、服务器计算机系统、瘦客户机、厚客户机、手持或膝上设备、基于微处理器的系统、机顶盒、可编程消费电子产品、网络个人电脑、小型计算机系统、大型计算机系统和包括上述任何系统的分布式云计算技术环境，等等。

计算机系统/服务器可以在由计算机系统执行的计算机系统可执行指令(诸如程序模块)的一般语境下描述。通常，程序模块可以包括例程、程序、目标程序、组件、逻辑、数据结构等等，它们执行特定的任务或者实现特定的抽象数据类型。计算机系统/服务器可以在分布式云计算环境中实施，分布式云计算环境中，任务是由通过通信网络链接的远程处理设备执行的。在分布式云计算环境中，程序模块可以位于包括存储设备的本地或远程计算系统存储介质上。

本发明实施例提供了一种单页面应用的接口数据获取方法，图1示出了本发明一实施例的单页面应用的接口数据获取方法的流程示意图，参见图1，该方法可以包括以下步骤s102至步骤s108。

步骤s102，在路由脚本文件加载时，基于预先配置的路由脚本文件对应的路由页面接口所需参数向服务端发送接口预请求。

该步骤中的接口预请求是向服务端发送的真实的接口请求。

步骤s104，接收服务端针对接口预请求返回的接口数据，将接口数据进行缓存。

步骤s106，若路由页面挂载完成且准备发出接口请求，从缓存的接口数据中查找接口请求对应的接口数据。

步骤s108，将查找到的接口请求对应的接口数据进行提取，并应用于路由页面中。

本发明实施例中，在路由脚本文件开始加载时，充分利用路由脚本文件加载的时间，同步基于预先配置的路由脚本文件对应的路由页面接口所需参数向服务端发送接口预请求，并将返回的接口数据进行缓存，从而在后续准备发送接口请求时可以直接、快速地获取到缓存的接口数据，有效地减少了路由页面挂载时发起的接口请求的等待时长，避免了由于路由页面中接口数据获取过慢导致的抖动问题，提高了用户浏览页面的体验。

参见上文步骤s102，在本发明实施例中，为减少接口请求的请求时间并提高接口数据的获取效率，在路由脚本文件开始加载时，可以并行地向服务端发送接口预请求，以通过接口预请求预先从服务端中请求出相应的接口数据。其中，路由脚本文件为路由js(javascript)文件，通常一个路由页面对应了一个路由js文件。

该实施例中，哪些路由页面和路由页面上的哪些接口需要进行接口预请求可以通过参数提前配置，进而依据配置的参数针对包含待接口预请求的路由页面上需预请求的接口向服务端发送接口预请求。

参见上文步骤s104，在本发明实施例中，当接收到服务端针对接口预请求返回的接口数据之后，通过将接口数据进行缓存，使得后续发出的接口请求无需再从服务端获取接口数据，而是直接从缓存的数据中查找对应的接口数据，以提高接口数据的获取效率。在一可选实施例中，可以将接口预请求所请求到的接口数据缓存至缓存池中，对于不同的接口预请求所请求到的接口数据在缓存池中分开缓存。

本发明实施例中，接口数据的缓存时间可以预先进行配置，通过对缓存时间进行合理的配置，保证缓存数据能够在后续被接口请求所请求到且缓存空间得到有效利用，避免缓存空间的过度占用。在一可选实施例中，可以基于路由页面上需预请求的接口对应的接口数据内容的变化频率配置接口数据的缓存时间，即可以针对不同接口数据内容的变化频率设置不同的缓存时间，通常情况下，接口数据内容的变化频率越高所配置的接口数据的缓存时间越短。例如，路由页面的一些接口对应的接口数据变化很快，可以设置其对应的缓存时间短一些，例如1.5毫秒、2毫秒等，若接口对应的接口数据不怎么变，可以设置其对应的缓存时间长一些，例如58毫秒、60毫秒等，本实施例对此不作具体的限定。

为避免需预请求的接口存在配置问题，在本发明一可选实施例中，还可以通过采用观察者模式来监控接口数据在缓存时间之内是否被接口请求所请求到，若过了接口数据的缓存时间，缓存的接口数据仍然未被使用，则可以提示预请求的接口存在配置错误，从而减少不必要的接口预请求发送。

在本发明一可选实施例中，预先配置的路由脚本文件对应的路由页面接口所需参数可以包含接口所在路由页面名称、接口唯一标识、接口路径等中的至少一项。该实施例中，接口所在路由页面名称可以表示出哪些路由页面中包含有待接口预请求的接口。其中，接口唯一标识可以包含接口名称、接口的url(uniformresourcelocator，统一资源定位符)等。本发明实施例对预先配置的接口的具体参数不作限定。

在该实施例中，当执行步骤s106从缓存的接口数据中查找接口请求对应的接口数据时，具体可以依据待预请求接口的接口唯一标识、接口路径中的至少一项从缓存的接口数据中快速地查找到接口请求对应的接口数据。

参见上文步骤s106，在本发明实施例中，路由页面挂载过程中会对路由页面进行渲染，在路由页面渲染完成之后通过执行钩子函数mounted进行接口请求相关数据的初始化，并触发接口请求的发送。例如，执行上文步骤s104中的路由脚本文件加载之后，在执行到路由页面挂载过程中渲染出路由页面的整体框架。通过拦截接口请求使接口请求不再发送至服务端，而是从缓存的接口数据中查找出对应的接口数据，进而将查找到的接口数据应用于所述路由页面中。例如，某网站首页包含的一个预请求接口所需展示的接口数据为该网站的用户人数，当首页页面的框架渲染完成之后，通过从缓存的接口数据中查找出预请求所请求的网站用户人数的数据，从而可以快速地在首页中展示网站用户人数。

该实施例中，拦截接口请求可以采用装饰模式或代理模式，在发送接口请求之后直接执行查找缓存的接口数据的过程。

结合上文实施例，本发明实施例还提供了另一种单页面应用的接口数据获取方法，图2示出了本发明另一实施例的单页面应用的接口数据获取方法的流程示意图，参见图2，该方法可以包括以下步骤s202至步骤s218。

步骤s202，在路由脚本文件加载时，基于预先配置的路由脚本文件对应的路由页面接口所需参数向服务端发送接口预请求。

该步骤中，关于路由页面接口所需参数的配置可以参见上文实施例，此处不再赘述。

步骤s204，将接口预请求对应的预请求状态进行缓存，其中，预请求状态包含预请求完成或预请求进行中。

该步骤中，将接口预请求对应的预请求状态进行缓存，后续可以方便的根据预请求状态分析预请求的所请求的接口数据是否缓存完成，预请求状态为预请求完成，则表示对应的接口数据缓存完成。预请求状态为预请求进行中，则表示对应的接口数据正在缓存进行中。

步骤s206，接收服务端针对接口预请求返回的接口数据，将接口数据进行缓存。

步骤s208，若路由页面挂载完成且准备发出接口请求，从缓存的接口数据中查找是否存在接口请求对应的接口数据。若是，执行步骤s210。若否，执行步骤s212将接口请求发送至服务端和步骤s214接收服务端针对接口请求返回的接口数据并应用于路由页面中。

在本发明实施例中，从缓存的接口数据中查找是否存在接口请求对应的接口数据是查看接口请求是否命中缓存的接口数据，若接口请求未命中缓存的接口数据，即缓存的接口数据不存在接口请求对应的接口数据，那么可能是相应的接口并未预先向服务端发出预请求，也可能预请求发送失败，因此，当缓存的接口数据不存在接口请求对应的接口数据时，可以通过发送接口请求来从服务端获取接口数据，以保证接口数据的有效获取。

步骤s210，分析缓存的接口预请求对应的预请求状态是否为预请求完成。若是，执行步骤s216。若否，执行步骤s218。

步骤s216，将查找到的接口请求对应的接口数据进行提取，并应用于路由页面中。

步骤s218，在指定时间内等待预请求状态变为预请求完成后将查找到的接口请求对应的接口数据进行提取，并应用于路由页面中。

在该步骤中，为避免预请求接口存在问题而一直无法完成预请求，可以通过设置指定时间范围来对预请求完成时间进行限定，若在指定时间内预请求完成，可以正常对预请求到的数据进行提取，若在指定时间内始终无法完成预请求，可以发出对应的接口存在问题的提示。

结合上文实施例，参见图3，现以一具体实施例对单页面应用的接口数据获取过程进行介绍。

在路由js文件加载的同时，并行的向服务端发送接口预请求。这里的接口预请求是向服务端发送的真实的接口请求，在发送接口预请求时会基于预先配置的接口所需参数向服务端发送接口预请求。接收到服务端返回的接口数据并缓存至缓冲池中。该实施例中，在路由js文件加载之前，单页面应用执行一些公共资源，如css(cascadingstylesheets，层叠样式表)文件、页面资源、图片资源等。

当路由页面挂载完成后，在准备发出接口请求时对接口请求进行拦截，判断接口请求是否命中缓存池中的接口数据。若命中缓存池中的接口数据，分析缓存池中命中的接口数据对应的预请求状态是否为预请求完成。若没有命中缓存池中的接口数据接口，向服务端发送接口请求(通常小于几毫秒的时间完成接口请求)，并接收服务端返回的接口数据，进而将接口数据应用于路由页面中。页面挂载完成后可通过执行钩子函数mounted进行接口请求相关数据的初始化，并触发接口请求的发送。

若分析缓存池中命中的接口数据对应的预请求状态为预请求完成，直接提取缓存池中相应的接口数据，将接口数据应用于路由页面中。若预请求状态不是预请求完成，等待预请求状态变为预请求完成后提取缓存池中相应的接口数据(通常小于几毫秒的时间完成接口预请求)，将接口数据应用于路由页面中。接口预请求的状态机promise体放入缓存池中，可以依据状态机的状来判断预请求状态。

基于同一发明构思，本发明实施例还提供了一种单页面应用的接口数据获取装置。图4示出了本发明一实施例的单页面应用的接口数据获取装置的结构示意图，参见图4，单页面应用的接口数据获取装置可以包括发送模块410、缓存模块420、查找模块430以及提取模块440，具体的：

发送模块410，适于在路由脚本文件加载时，基于预先配置的路由脚本文件对应的路由页面接口所需参数向服务端发送接口预请求；

缓存模块420，适于接收服务端针对接口预请求返回的接口数据，将接口数据进行缓存；

查找模块430，适于若路由页面挂载完成且准备发出接口请求，从缓存的接口数据中查找接口请求对应的接口数据；

提取模块440，适于将查找到的接口请求对应的接口数据进行提取，并应用于路由页面中。

在本发明的可选实施例中，缓存模块420还适于，将接口预请求对应的预请求状态进行缓存，其中，预请求状态包含预请求完成或预请求进行中。

在本发明的可选实施例中，提取模块440还适于，若查找到接口请求对应的接口数据，分析缓存的接口预请求对应的预请求状态是否为预请求完成。若预请求状态是预请求完成，将查找到的接口请求对应的接口数据进行提取。若预请求状态不是预请求完成，在指定时间内等待预请求状态变为预请求完成后将查找到的接口请求对应的接口数据进行提取。

参见图5，在本发明的可选实施例中，上文图4中的单页面应用的接口数据获取装置还可以包括配置模块450。配置模块450适于基于路由页面上需预请求的接口对应的接口数据内容配置接口数据的缓存时间，其中接口数据内容的变化频率越高，对应配置的接口数据的缓存时间越短。

继续参见图5，在本发明的可选实施例中，上文图4中的单页面应用的接口数据获取装置还可以包括接收模块460。上文中的发送模块410还适于若从缓存的接口数据中未查找到接口请求对应的接口数据，将接口请求发送至服务端。接收模块460适于接收服务端针对接口请求返回的接口数据并应用于路由页面中。

在本发明的可选实施例中，预先配置的路由脚本文件对应的路由页面接口所需参数包括待接口预请求的路由页面信息、接口唯一标识、接口路径中的至少一项。

在本发明的可选实施例中，查找模块430还适于，依据请求接口的接口唯一标识、接口路径中的至少一项从缓存的接口数据中查找接口请求对应的接口数据。

基于同一发明构思，本发明实施例还提供了一种计算机可读存储介质，存储有计算机程序代码，当计算机程序代码在计算设备上运行时，导致计算设备执行上文任一实施例中的单页面应用的接口数据获取方法。

基于同一发明构思，本发明实施例还提供了一种计算设备，包括处理器；存储有计算机程序代码的存储器；当计算机程序代码被处理器运行时，导致计算设备执行上文任一实施例中的单页面应用的接口数据获取方法。

本说明书中各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似的部分相互参见即可。对于系统实施例而言，由于其与方法实施例基本对应，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

可能以许多方式来实现本发明的方法和系统。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本发明的方法和系统。用于所述方法的步骤的上述顺序仅是为了进行说明，本发明的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本发明实施为记录在记录介质中的程序，这些程序包括用于实现根据本发明的方法的机器可读指令。因而，本发明还覆盖存储用于执行根据本发明的方法的程序的记录介质。

本发明的描述是为了示例和描述起见而给出的，而并不是无遗漏的或者将本发明限于所公开的形式。很多修改和变化对于本领域的普通技术人员而言是显然的。选择和描述实施例是为了更好说明本发明的原理和实际应用，并且使本领域的普通技术人员能够理解本发明从而设计适于特定用途的带有各种修改的各种实施例。