异步请求数据可控渲染的实现方法与流程

1.本发明涉及一种数据渲染方法，特别涉及异步请求数据可控渲染的实现方法，属于数据处理技术领域。


背景技术：

2.promise是异步编程的一种解决方案，从语法上讲，promise是一个对象，他可以获取异步操作的消息。从本意上讲，他是承诺，承诺它过一段时间会给你一个结果，promise有三种状态：pending(等待态)，fulfiled(成功态)，reject(失败态)：状态一旦改变，就不会再变，创造promise实例后，它会立刻执行。有了promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
3.但promise也有其缺点，比如：一旦新建就会立即执行，无法中途取消。因此如果短时间连续进行数据请求时，有概率出现第二次请求数据先返回，第一次请求的数据后返回。从而第一次请求的数据将第二次请求的数据覆盖。导致页面上的渲染内容与用户实际想看到的内容不一致，举例：
4.比如用户想要进行关键字查询操作，用户在输入框输入“张三”两个字，那么在输入“张”的时候，用“张”进行了第一次搜索，紧接着输入“三”的时候用“张三”进行了第二次搜索。通常情况会先返回关键字“张”的相关数据并显示，之后立刻搜索出关键字“张三”的相关数据渲染显示。
5.但由于promise对象内部是异步操作，无法预期每次请求什么时候会返回对应的结果。因此小概率会出现关键字“张三”搜索的结果会先返回，在页面渲染，之后，关键字“张”搜索的结果才返回，渲染到页面上。这样就出现了用户想搜索的是“张三”，但实际看起来却只搜索了“张”这样的不符合用户预期的情况。
6.异步是相对于同步而言的，同步是指按照顺序执行比如说三个步骤。先执行第一步，再执行第二步再执行第三步。而异步执行不是按照顺序的。比如当前业务逻辑是先执行第一步，但是第一步执行耗时较长，并且第二步必须在完成第一步之后才能进行，第三步则不受第一步限制，那么为了保证执行效率，不让第三步阻塞住，可以执行第一步之后直接执行第三步。然后等第一步完成后自动执行第二步，因此这种例子的情形，异步的执行顺序就是第一步、第三步、第二步。
7.在前端定义一个全局变量保存当前请求的唯一标识符，并把这个标识符带上传给后端，后端需要在请求返回的数据中也返回过来，判断全局变量的值是否等于该标识符，如果等于就肯定是最后一次发起的请求，然后再渲染页面。否则就跳过这一次渲染。
8.第一：保存识别符的全局变量和请求数据的函数，这两者的代码位置分离导致代码的内聚程度低，代码结构松散，且这种识别符，不加注释难以理解变量含义，代码经多人维护后，这种hack方式可能导致新接手难以维护。
9.第二：由于需要在请求返回结果中判断这个这个标志符是否相等，那也就意味着需要后端做相应的配合将此数据返回，涉及到的接口都需要作此处理。后端开发成本会提
高。


技术实现要素：

10.本发明的目的在于提供异步请求数据可控渲染的实现方法，以解决上述背景技术中提出的由于需要在请求返回结果中判断这个这个标志符是否相等，那也就意味着需要后端做相应的配合将此数据返回，涉及到的接口都需要作此处理。后端开发成本会提高的问题。
11.为实现上述目的，本发明提供如下技术方案：异步请求数据可控渲染的实现方法，所述可控渲染的实现方法如下：
12.封装一个通用函数，该通用函数接收参数为数据请求函数，保存两个 变量resolve函数和reject函数，之后返回一个对象，对象中需要包含两 个参数，为参数一和参数二。
13.作为本发明的一种优选技术方案，所述参数一是数据请求函数返回了一个promsie对象，所述参数二是中止请求的方法。
14.作为本发明的一种优选技术方案，其中声明的变量resolve函数，保 存数据请求函数成功执行的方法resolve，reject函数保存数据请求函数 失败执行的方法reject，并执行传入的方法。
15.作为本发明的一种优选技术方案，所述中止请求的方法中会直接执行 reject函数，让promise以失败的方式结束。
16.作为本发明的一种优选技术方案，保存两个变量resolve函数和reject 函数，采用闭包的方式进行保存。
17.与现有技术相比，本发明的有益效果是：
18.本发明异步请求数据可控渲染的实现方法，本发明方案保证了代码的 高内聚性，变量不需要注释即可方便理解，降低了维护难度，可靠性高， 同时本发明是纯前端解决方案，不需要后端做相应的配合将特殊标识符返 回，涉及到的其他接口也不需要作此处理，降低了后端开发成本，可解决 渲染错乱问题。
附图说明
19.图1为本发明的流程结构示意图。
具体实施方式
20.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
21.参考图1所示，本发明提供了异步请求数据可控渲染的实现方法的技术方案：异步请求数据可控渲染的实现方法，
22.promise本身是无法做取消操作的，本发明的思路为将promise提前中止(或者说提前结束)。
23.其中取消和中止这两者有一定区别，promise无法取消是指，请求发出后，请求一定会进行，最终要么成功，要么失败，总会得出一个成功或者失败的结果。而请求中止是指，请求进行过程中，让请求提前结束，直接告诉promise这是失败了，从而让promise直接返回预先设置好的失败的结果，这样原本应该可以成功的请求直接被强制失败了，也就实现了 promise的中止过程。
24.还是以搜索为例。用户连续输入“张三”，搜索“张”promise请求发出，在搜索“张三”之前，我们会先执行中止promise请求的方法。这样就保证了“张”搜索是失败的，没有获取到数据，也就不可能出现后返回数据，导致覆盖最新数据的问题了。
25.因此，可控渲染的实现方法如下：
26.封装一个通用函数，该通用函数接收参数为数据请求函数，保存两个 变量resolve函数和reject函数，之后返回一个对象，对象中需要包含两 个参数，为参数一和参数二。
27.参数一是数据请求函数返回的promise对象，所述参数二是中止请求 的方法，其中声明的变量resolve函数，保存数据请求函数成功执行的方 法resolve，reject函数保存数据请求函数失败执行的方法reject，并执 行传入的方法。
28.中止请求的方法中会直接执行reject函数，让promise以失败的方式结束， 保存两个变量resolve函数和reject函数，采用闭包的方式进行保存。
29.在本发明的描述中，需要理解的是，指示的方位或位置关系为基于附 图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是 指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和 操作，因此不能理解为对本发明的限制。
30.在本发明中，除非另有明确的规定和限定，例如，可以是固定连接， 也可以是可拆卸连接，或成一体；可以是机械连接，也可以是电连接；可 以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连 通或两个元件的相互作用关系，除非另有明确的限定，对于本领域的普通 技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。
31.尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员 而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例 进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等 同物限定。