基于Fetch的数据通信方法和系统技术方案

本发明专利技术涉及一种基于Fetch的数据通信方法和系统，所述方法包括：客户端基于Fetch向服务器端发送请求；根据客户端发送的请求，选择Client中相应的方法，并通过Request中统一封装的request方法向服务器端发送请求；服务器端接收到发送请求后，根据请求参数从数据库获取相应数据，并返回给客户端。本发明专利技术提出了一个通用的请求流程，提供统一的初始化配置信息，能够适应不同配置下的各种请求；该方法将请求方式标准化，通过给定的请求方式进行数据请求，降低了用户使用门槛；该方法将拦截器规范化，规范了请求拦截、响应拦截和异常处理，为整个请求流程提供了可靠、规范的数据处理过程，有利于实现前后端的高质量通信。有利于实现前后端的高质量通信。有利于实现前后端的高质量通信。

【技术实现步骤摘要】
基于Fetch的数据通信方法和系统


[0001]本专利技术涉及web前端开发
，具体涉及一种基于Fetch的数据通信方法和系统。

技术介绍

[0002]目前前端开发领域有各种前后端数据通讯的业务场景，包括：静态资源的获取、数据的更新、页面的无刷新渲染等等。现有的两端之间的数据交互常用的是基于XMLHttpRequests开发的第三方库，因此依赖的质量良莠不齐，可扩展性也因XMLHttpRequests的局限性而不同。
[0003]现有的前端项目只要与后台进行数据交互时，都会用到相关的Http请求库，以实现页面数据的局部渲染。目前市场上提供的Http库中，基本都是通过Promise封装XMLHttpRequests的Http库，应用场景多为浏览器端。比如现在市场上覆盖率最高的Http库为Axios，是为数不多的可以在浏览器和node中同时使用的库。现有的Http库可扩展性和高效性较差，代码的复杂度较高，功能实现操作复杂，扩展的信息不清晰、调用不方便，严重影响了web前端开发者的开发效率和质量，不利于实现前后端的高质量数据通信。

技术实现思路

[0004]有鉴于此，本专利技术的目的在于克服现有技术的不足，提供一种基于Fetch的数据通信方法和系统。
[0005]为实现以上目的，本专利技术采用如下技术方案：一种基于Fetch的数据通信方法，包括：
[0006]客户端基于Fetch向服务器端发送请求；
[0007]根据客户端发送的请求，选择Client中相应的方法，并通过Request中统一封装的request方法向服务器端发送请求；
[0008]服务器端接收到发送请求后，根据请求参数从数据库获取相应的数据，并将数据返回给客户端。
[0009]可选的，所述客户端基于Fetch向服务器端发送请求，包括：
[0010]引入http库，并进行初始化配置；
[0011]以配置后的方式向服务器端发送请求。
[0012]可选的，所述http库的开发过程包括四个步骤：
[0013]步骤一：通过window.fetch发起调用；
[0014]步骤二：抽离出window.fetch的功能模块，并进行单独编译和存储；
[0015]步骤三：对window.fetch原有的方法进行重写，对window.fetch进行封装、利用其Promise的特性添加请求/响应拦截器和异常处理器；
[0016]步骤四：将封装好的http库返回给用户。
[0017]可选的，所述window.fetch的功能模块，包括：
[0018]对客户端请求方法进行统一管理的CLient，
[0019]对请求方式进行统一管理的Request，以及，
[0020]对接口异常进行捕获处理的HttpError。
[0021]可选的，所述进行初始化配置，包括：
[0022]根据业务需求对请求方式和请求参数进行初始化配置；
[0023]所述请求方式包括：get、post、put、delete、upload、download和ossDownload。
[0024]可选的，所述选择Client中相应的方法，包括：
[0025]调用Client中根据请求方式封装的请求方法。
[0026]可选的，所述客户端基于Fetch向服务器端发送请求，还包括：
[0027]设置请求/响应拦截器，和/或，设置异常处理器。
[0028]可选的，当客户端设置了请求/响应拦截器后，所述选择Client中相应的方法，包括：
[0029]调用Client中与拦截器相对应的拦截方法；
[0030]当客户端设置了异常处理器后，所述选择Client中相应的方法，包括：
[0031]调用Client中与异常处理器相对应的异常处理方法。
[0032]可选的，当客户端设置了请求/响应拦截器后，响应拦截器能够对服务器端返回的数据进行处理，并将处理后的数据统一返回给客户端；
[0033]当客户端设置了异常处理器后，异常处理器能够对服务器端返回的数据进行拦截，并处理报错信息。
[0034]本专利技术还提供了一种基于fetch的前后端数据通信系统，包括：
[0035]客户端、OureaFetch库和服务器端；
[0036]其中，所述客户端用于基于Fetch向所述服务器端发送请求；
[0037]所述OureaFetch库用于根据所述客户端发送的请求，选择Client中相应的方法，并通过Request中统一封装的request方法向所述服务器端发送请求；
[0038]所述服务器端用于接收到发送请求后，根据请求参数从数据库获取相应的数据，并将数据返回给所述客户端。
[0039]本专利技术采用以上技术方案，所述一种基于Fetch的数据通信方法，包括：客户端基于Fetch向服务器端发送请求；根据客户端发送的请求，选择Client中相应的方法，并通过Request中统一封装的request方法向服务器端发送请求；服务器端接收到发送请求后，根据请求参数从数据库获取相应的数据，并将数据返回给客户端。本专利技术所述基于Fetch的数据通信方法提出了一个通用的请求流程，提供统一的初始化配置信息，能够适应不同配置下的各种请求；该方法将请求方式标准化，通过给定的请求方式进行数据请求，降低用户的使用门槛；该方法将拦截器规范化，规范了请求拦截、响应拦截和异常处理，为整个请求流程提供了可靠的、规范的数据处理过程，有利于实现前后端的高质量数据通信。
附图说明
[0040]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以
根据这些附图获得其他的附图。
[0041]图1是本专利技术一种基于Fetch的数据通信方法提供的整体流程示意图；
[0042]图2是本专利技术一种基于Fetch的数据通信方法业务处理流程示意图；
[0043]图3是本专利技术一种基于Fetch的数据通信系统提供的结构示意图。
[0044]图中：1、客户端；2、OureaFetch库；3、服务器端。
具体实施方式
[0045]为使本专利技术的目的、技术方案和优点更加清楚，下面将对本专利技术的技术方案进行详细的描述。显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本专利技术所保护的范围。
[0046]图1是本专利技术一种基于Fetch的数据通信方法提供的整体流程示意图。
[0047]如图1所示，本专利技术所述的一种基于Fetch的数据通信方法，包括：
[0048]S11：客户端基于Fetch向服务器端发送请本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于Fetch的数据通信方法，其特征在于，包括：客户端基于Fetch向服务器端发送请求；根据客户端发送的请求，选择Client中相应的方法，并通过Request中统一封装的request方法向服务器端发送请求；服务器端接收到发送请求后，根据请求参数从数据库获取相应的数据，并将数据返回给客户端。2.根据权利要求1所述的数据通信方法，其特征在于，所述客户端基于Fetch向服务器端发送请求，包括：引入http库，并进行初始化配置；以配置后的方式向服务器端发送请求。3.根据权利要求2所述的数据通信方法，其特征在于，所述http库的开发过程包括四个步骤：步骤一：通过window.fetch发起调用；步骤二：抽离出window.fetch的功能模块，并进行单独编译和存储；步骤三：对window.fetch原有的方法进行重写，对window.fetch进行封装、利用其Promise的特性添加请求/响应拦截器和异常处理器；步骤四：将封装好的http库返回给用户。4.根据权利要求3所述的数据通信方法，其特征在于，所述window.fetch的功能模块，包括：对客户端请求方法进行统一管理的CLient，对请求方式进行统一管理的Request，以及，对接口异常进行捕获处理的HttpError。5.根据权利要求2所述的数据通信方法，其特征在于，所述进行初始化配置，包括：根据业务需求对请求方式和请求参数进行初始化配置；所述请求方式包括：get、post、put、delete、upload、downloa...

【专利技术属性】
技术研发人员：袁楠，崔勇芳，
申请(专利权)人：杭州天阙科技有限公司，
类型：发明
国别省市：