CN111061467B - 一种前端工程请求模块高效管理的方法 - Google Patents

Abstract

本发明涉及前端开发技术领域，具体涉及一种前端工程请求模块高效管理的方法，定义全局模块，将全局模块写入requestCreator中；在请求定义的模块文件中引入requestCreator，创建request函数；调用request函数定义请求，注入请求参数和响应数据的静态类型；编写请求调用逻辑，进行静态类型检查；定义全局默认参数和动态传参检查机制；编写请求响应逻辑，进行静态类型检查，直至请求调用完成。以此在注入请求参数和响应数据的静态类型，使得获取参数和响应数据时均能获得提示，静态类型检查在代码编写阶段即能及时提醒传入的参数是否合适，而且通过全局默认参数和动态传参检查机制可以在未被告知变更或使用者未在调试相关的模块的情况下获取变更，大大提高开发管理的效率。

Description

一种前端工程请求模块高效管理的方法

技术领域

本发明涉及前端开发技术领域，具体涉及一种前端工程请求模块高效管理的方法。

背景技术

随着近几年前端技术的不断发展，前后端完全分离的开发模式越来越多应用到真实的项目中。这一开发模式虽然可以清晰划分了前后端的工作界限、解耦前后端代码，让同一个后端支持多终端得以实现。然而，前端拥有了自己的工程后开发效率获得提升，同时也给前端工程管理也成了一个难题。

在前后端工程管理中，请求是前端与后端通信的唯一方式，也是前端工程中存在变化最大的部分。请求的url、传入参数、返回数据的变化会导致前端程序出错需要重写。实际的开发过程中，请求的变更不可避免地频繁地发生，请求的管理成了前端工程中最为重要的组成部分之一。

目前前端工程领域中主流的方式是：将请求定义在单独的js模块文件中，通过jsdoc注释方式，将请求的请求参数和返回数据的格式写进注释中，开发者可以通过ide提供的注释提示和代码跳转功能方便获取接口的信息，只需维护独立的js模块文件便能所有开发者看到请求的更新。

这种基于js的请求管理方式虽然能部分解决前端工程请求管理的部分痛点，但还是不够彻底。主要存在以下问题：

1.参数和返回数据仅能通过注释提示，无法避免在请求说明文档或模块中频繁切换复制粘贴的困局，严重影响了开发效率；

2.javascript是动态语言，传参是否正确、返回的数据是否通过正确的类型方法处理，需要运行调试才能发现，发现问题往往很长时间的排查才能发现问题所在；

3.请求模块文件仅具有被动提示的功能，请求信息的变更需要开发者主动通过查看模块文件才能获知，在请求使用者（一个请求往往有多个开发者使用）未被告知变更或使用者未在调试相关的模块的情况下，使用者无法获取变更，一旦被告知出现错误时，往往需要花相当大的工作才能定位问题所在。

因此，行业内亟需一种能解决上述问题的方案。

发明内容

本发明的目的在于针对现有技术的不足而提供一种前端工程请求模块高效管理的方法。本发明的目的可以通过如下所述技术方案来实现。

一种前端工程请求模块高效管理的方法，包括：

定义一全局模块，并将全局模块写入高阶函数requestCreator中；

在请求定义的模块文件中引入高阶函数requestCreator，创建一用于定义接口的request函数；

基于typescript开发调用request函数定义请求，注入请求参数和响应数据的静态类型；

引入定义的请求编写请求调用逻辑，进行静态类型检查；

定义请求的全局默认参数和动态传参检查机制；

编写请求响应逻辑，进行静态类型检查，直至请求调用完成。

进一步地，使用url前缀参数和axios对象参数创建用于定义接口的request函数，使用url前缀参数和axios对象参数具体包括：

调入高阶函数requestCreator中的全局模块；

定义请求参数的静态类型；

定义请求参数的动态类型；

其中，若未传入高阶函数requestCreator中的axios对象参数，则使用全局的axios对象参数。

进一步地，创建一用于定义接口的request函数，包括：

在高阶函数requestCreator的内部定义一个请求函数httpRequest；

根据调用高阶函数requestCreator时传入的url前缀参数和axios对象参数生成特定的请求函数httpRequest；

返回createRequest函数，并定义函数的success处理逻辑，通过createRequest函数将传入的参数传递给请求函数httpRequest，使定义的请求与函数httpRequest进行绑定；

当调用函数httpRequest时即发起axios请求并返回结果。

进一步地，success处理逻辑包括调用函数promise.resolve(response)及函数函数success().then(fn)，具体为：

在发起axios请求后，对数据进行处理并返回一个promise；

当返回数据code===0时, 调用函数promise.resolve(response)并将数据传递给调用函数success().then(fn)中的fn，fn接受数据并进行相应的响应处理；

否则，先提示错误的信息，并调用函数promise.rejected(response)，使函数success().then(fn)中的fn无法再执行，终止处理。

进一步地，定义请求的全局默认参数和动态传参检查机制，包括：

定义请求的全局默认参数和动态类型；

判断当前是否处于开发环境且已经定义了动态数据类型data；若是，则遍历data进行动态传参检查；其中，动态传参检查包括检测实际传入的js数据是否与定义的一致及定义需传入的参数是否传入；

若实际传入的js数据与定义的一致及定义需传入的参数传入，则通过检查，继续执行；否则，未通过检查，进行报错且不执行请求。

进一步地，在编写请求调用逻辑或编写请求响应逻辑时均进行静态类型检测，具体包括：

进行编写请求调用逻辑时，判断是否已定义参数静态类型及定义的参数静态类型，在IDE中提示参数名称和参数类型，若参数未按类型传入则通过IDE报错；

进行编写请求响应逻辑时，判断是否已定义响应数据静态类型及定义的响应数据静态类型，在IDE中提示响应数据名称和响应数据类型，若响应数据类型未按类型传入则通过IDE报错。

一种计算机可读存储设备，存储有计算机程序，所述计算机程序被处理器执行以实现上述的前端工程请求模块高效管理的方法。

一种移动终端，包括：

处理器，适于执行程序指令；

存储设备，适于存储程序指令，所述程序指令适于由处理器加载并执行以实现上述的前端工程请求模块高效管理的方法。

一种前端工程请求模块高效管理的***，包括服务器；

服务器包括处理器和存储设备；

处理器，适于执行程序指令；

存储设备，适于存储程序指令，所述程序指令适于由处理器加载并执行以实现上述的前端工程请求模块高效管理的方法。

与现有技术比，本发明的有益效果：

本发明研发了一种前端工程请求模块高效管理的方法，基于typescript开发，在定义请求时注入请求参数和响应数据的静态类型，使得获取参数和响应数据时均能获得提示，同时通过静态类型检查在代码编写阶段即能及时提醒开发者传入的参数是否合适，无需像传统方式需要运行调试才能确定，而且通过全局默认参数和动态传参检查机制能覆盖静态类型无法事先知晓的场景，可以在未被告知变更或使用者未在调试相关的模块的情况下获取变更，大大提高开发管理的效率。

附图说明

图1为本发明实施例中的流程示意图。

具体实施方式

下面将结合具体实施例，对本发明的技术方案进行清楚、完整的描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通的技术人员在没有做出创造性劳动的前提下所获得的所有其它实施例，都属于本发明的保护范围。

一种前端工程请求模块高效管理的方法，使用了axios (http请求库)结合typescript语言，通过高阶函数requestCreator的方式生成一个request函数，此request函数能注入typescript类型、动态检查传参类型，开发人员使用此函数并注入参数类型和响应数据类型，最终生成一个axios请求如图1所示，包括：

定义一全局模块，该全局模块包括多种模块，优选为ajax.ts模块，所有请求的定义模块均引入此全局模块中，将全局模块写入高阶函数requestCreator中。

在请求定义的模块文件中，例如userApi.ts文件中引入高阶函数requestCreator，创建一用于定义接口的request函数，创建用于定义接口的request函数的过程是使用url前缀参数和axios对象参数完成创建的。其中，使用url前缀参数和axios对象参数具体包括调入高阶函数requestCreator中的全局模块，定义请求参数的静态类型以及定义请求参数的动态类型。若未传入高阶函数requestCreator中的axios对象参数，则使用全局的axios对象参数。

创建一用于定义接口的request函数时，先在高阶函数requestCreator的内部定义一个请求函数httpRequest。根据调用高阶函数requestCreator时传入的url前缀参数和axios对象参数生成特定的请求函数httpRequest。返回createRequest函数，并定义函数的success处理逻辑，通过createRequest函数将传入的参数传递给请求函数httpRequest，使定义的请求与函数httpRequest进行绑定。当调用函数httpRequest时即发起axios请求并返回结果。

success处理逻辑包括调用函数promise.resolve(response)及函数函数success().then(fn)。在发起axios请求后，对数据进行处理并返回一个promise。当返回数据code===0时, 调用函数promise.resolve(response)并将数据传递给调用函数success().then(fn)中的fn，fn接受数据并进行相应的响应处理；否则，先提示错误的信息，并调用函数promise.rejected(response)，使函数success().then(fn)中的fn无法再执行，终止处理。

为了使得获取参数和响应数据时均能获得提示，基于typescript开发调用request函数定义请求，注入请求参数和响应数据的静态类型。具体地，在定义请求参数的静态类型时，先定义响应数据的静态类型，再调用request函数将ICondition和IUserInfo静态类型注入，并传入定义请求所需的值，需要使用请求的模块中引入上述定义的userLogin请求。以此获取参数和响应数据时均能获得提示，有效克服了在请求说明文档或模块中频繁切换复制粘贴的困局，大大提高了开发效率。

引入定义的请求编写请求调用逻辑，进行静态类型检查。通过静态类型检查在代码编写阶段即能及时提醒开发者传入的参数是否合适，无需像传统方式需要运行调试才能确定。

而且定义请求的全局默认参数和动态传参检查机制，此机制与vue的props有一致的api，其中全局默认参数只要在请求定义的过程中指明了default属性即可。而动态传参类型检查需判断当前处于开发环境并且定义请求的过程中定义了动态数据类型data，才会触发动态传参检查机制，动态传参检查机制能覆盖静态类型无法事先知晓的场景，可以在未被告知变更或使用者未在调试相关的模块的情况下获取变更，大大提高开发管理的效率。定义请求的全局默认参数和动态传参检查机制时，先定义请求的全局默认参数和动态类型，判断当前是否处于开发环境且已经定义了动态数据类型data；若是，则遍历data进行动态传参检查；其中，动态传参检查包括检测实际传入的js数据是否与定义的一致及定义需传入的参数是否传入。若实际传入的js数据与定义的一致及定义需传入的参数传入，则通过检查，继续执行；否则，未通过检查，进行报错且不执行请求，有效降低请求调用的出错率和提高使用接口的编程的开发效率。

具体地，请求定义的静态类型ICondition，会在检查调用userLogin(condition)和userLogin.success(condition)过程中，判断所传入的condition的静态类型是否与ICondition一致，如果不一致则ide会提示错误信息信息。另外响应数据的静态类型IUserInfo在编写处理响应函数fn的过程中能智能提示字段名和类型。

编写请求响应逻辑，进行静态类型检查，直至请求调用完成。也即在编写请求调用逻辑或编写请求响应逻辑时均进行静态类型检测。具体地，进行编写请求调用逻辑时，判断是否已定义参数静态类型及定义的参数静态类型，在IDE中提示参数名称和参数类型，若参数未按类型传入则通过IDE报错。进行编写请求响应逻辑时，判断是否已定义响应数据静态类型及定义的响应数据静态类型，在IDE中提示响应数据名称和响应数据类型，若响应数据类型未按类型传入则通过IDE报错。

本发明提供的一种前端工程请求模块高效管理的方法，定义一个请求函数httpRequest，本发明所有的请求均调用此httpRequest函数，可以执行动态类型的检查，其执行默认值的赋值和查询条件的复制，查询条件优先级高于默认值，而且可以将url传入的模板变量替换成传入的查询参数的具体数据值。其中如果请求使用了get的方式，则将查询条件赋给parmas，否则赋给data。

另外，本领域普通技术人员可以理解：实现上述方法实施的全部或部分步骤可以通过程序指令相关的硬件来完成，前述程序指令可以存储于一计算机可读取存储介质或存储设备中，该程序指令在执行时，执行上述方法的步骤；而前述存储介质或存储设备包括但不限于：ROM、RAM、磁盘或者光盘等各种可以存储程序代码的介质。

因此相应地，本发明实施例还提供了一种计算机可读存储设备，存储有计算机程序，所述计算机程序被处理器执行以实现所述前端工程请求模块高效管理的方法。

进一步地，本发明还配套提供了一种相应的移动终端、***来实现上述前端工程请求模块高效管理的方法，具体为：

一种移动终端，包括：

处理器，适于执行程序指令；

存储设备，适于存储程序指令，所述程序指令适于由处理器加载并执行以实现所述的前端工程请求模块高效管理的方法。

一种前端工程请求模块高效管理的***，包括服务器；服务器包括处理器和存储设备；

处理器，适于执行程序指令；

存储设备，适于存储程序指令，所述程序指令适于由处理器加载并执行以实现所述的前端工程请求模块高效管理的方法。

以上借助具体实施例对本发明做了进一步描述，但是应该理解的是，这里具体的描述，不应理解为对本发明的实质和范围的限定，本领域内的普通技术人员在阅读本说明书后对上述实施例做出的各种修改，都属于本发明所保护的范围。

Claims (9)

1.一种前端工程请求模块高效管理的方法，其特征在于，包括：

定义一全局模块，并将全局模块写入高阶函数requestCreator中；

在请求定义的模块文件中引入高阶函数requestCreator，创建一用于定义接口的request函数；

基于typescript开发调用request函数定义请求，注入请求参数和响应数据的静态类型；

引入定义的请求编写请求调用逻辑，进行静态类型检查；

定义请求的全局默认参数和动态传参检查机制；

编写请求响应逻辑，进行静态类型检查，直至请求调用完成。

2.根据权利要求1所述的一种前端工程请求模块高效管理的方法，其特征在于，使用url前缀参数和axios对象参数创建用于定义接口的request函数，使用url前缀参数和axios对象参数具体包括：

调入高阶函数requestCreator中的全局模块；

定义请求参数的静态类型；

定义请求参数的动态类型；

其中，若未传入高阶函数requestCreator中的axios对象参数，则使用全局的axios对象参数。

3.根据权利要求2所述的一种前端工程请求模块高效管理的方法，其特征在于，创建一用于定义接口的request函数，包括：

在高阶函数requestCreator的内部定义一个请求函数httpRequest；

根据调用高阶函数requestCreator时传入的url前缀参数和axios对象参数生成特定的请求函数httpRequest；

返回createRequest函数，并定义函数的success处理逻辑，通过createRequest函数将传入的参数传递给请求函数httpRequest，使定义的请求与函数httpRequest进行绑定；

当调用函数httpRequest时即发起axios请求并返回结果。

4.根据权利要求3所述的一种前端工程请求模块高效管理的方法，其特征在于，success处理逻辑包括调用函数promise.resolve(response)及函数success().then(fn)，具体为：

在发起axios请求后，对数据进行处理并返回一个promise；

当返回数据code===0时, 调用函数promise.resolve(response)并将数据传递给调用函数success().then(fn)中的fn，fn接受数据并进行相应的响应处理；

否则，先提示错误的信息，并调用函数promise.rejected(response)，使函数success().then(fn)中的fn无法再执行，终止处理。

5.根据权利要求1所述的一种前端工程请求模块高效管理的方法，其特征在于，定义请求的全局默认参数和动态传参检查机制，包括：

定义请求的全局默认参数和动态类型；

判断当前是否处于开发环境且已经定义了动态数据类型data；若是，则遍历data进行动态传参检查；其中，动态传参检查包括检测实际传入的js数据是否与定义的一致及定义需传入的参数是否传入；

若实际传入的js数据与定义的一致及定义需传入的参数传入，则通过检查，继续执行；否则，未通过检查，进行报错且不执行请求。

6.根据权利要求1所述的一种前端工程请求模块高效管理的方法，其特征在于，在编写请求调用逻辑或编写请求响应逻辑时均进行静态类型检测，具体包括：

进行编写请求调用逻辑时，判断是否已定义参数静态类型及定义的参数静态类型，在IDE中提示参数名称和参数类型，若参数未按类型传入则通过IDE报错；

进行编写请求响应逻辑时，判断是否已定义响应数据静态类型及定义的响应数据静态类型，在IDE中提示响应数据名称和响应数据类型，若响应数据类型未按类型传入则通过IDE报错。

7.一种计算机可读存储设备，存储有计算机程序，其特征在于，所述计算机程序被处理器执行以实现权利要求1至6任意一项所述的前端工程请求模块高效管理的方法。

8.一种移动终端，其特征在于，包括：

处理器，适于执行程序指令；

存储设备，适于存储程序指令，所述程序指令适于由处理器加载并执行以实现权利要求1至6任意一项所述的前端工程请求模块高效管理的方法。

9.一种前端工程请求模块高效管理的***，其特征在于，包括服务器；

服务器包括处理器和存储设备；

处理器，适于执行程序指令；

存储设备，适于存储程序指令，所述程序指令适于由处理器加载并执行以实现权利要求1至6任意一项所述的前端工程请求模块高效管理的方法。

Images