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

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

An efficient management method of front end engineering request module

【技术实现步骤摘要】
一种前端工程请求模块高效管理的方法
本专利技术涉及前端开发
,具体涉及一种前端工程请求模块高效管理的方法。
技术介绍
随着近几年前端技术的不断发展,前后端完全分离的开发模式越来越多应用到真实的项目中。这一开发模式虽然可以清晰划分了前后端的工作界限、解耦前后端代码,让同一个后端支持多终端得以实现。然而,前端拥有了自己的工程后开发效率获得提升,同时也给前端工程管理也成了一个难题。在前后端工程管理中,请求是前端与后端通信的唯一方式,也是前端工程中存在变化最大的部分。请求的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为本专利技术实施例中的流程示意图。具体实施方式下面将结合具体实施例,对本专利技术的技术方案进行清楚、完整的描述,显然,所描述的实施例仅仅是本专利技术一部分实施例,而不是全部的实施例。基于本专利技术中的实施例,本领域普通的技本文档来自技高网
...

【技术保护点】
1.一种前端工程请求模块高效管理的方法,其特征在于,包括:/n定义一全局模块,并将全局模块写入高阶函数requestCreator中;/n在请求定义的模块文件中引入高阶函数requestCreator,创建一用于定义接口的request函数;/n基于typescript开发调用request函数定义请求,注入请求参数和响应数据的静态类型;/n引入定义的请求编写请求调用逻辑,进行静态类型检查;/n定义请求的全局默认参数和动态传参检查机制;/n编写请求响应逻辑,进行静态类型检查,直至请求调用完成。/n

【技术特征摘要】
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时,调用函数prom...

【专利技术属性】
技术研发人员:麦家健陈健豪朱凌峰
申请(专利权)人:东莞数汇大数据有限公司
类型:发明
国别省市:广东;44

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1