摘要：在日常开发中，我们经常会用到与后台进行数据交互，异步请求的情况一般分为两种，小量数据下的一次性请求与大量数据下的连续或并发请求，这篇文章介绍的就是中断在大量连续请求的情况下的作用和必要性。当第一个请求完成后，第二个或者其他的请求并没有完成。
在日常开发中，我们经常会用到ajax与后台进行数据交互，异步请求的情况一般分为两种，小量数据下的一次性请求与大量数据下的连续或并发请求，这篇文章介绍的就是中断在大量连续请求的情况下的作用和必要性。
我们先设想一个情况，比如我要画出一个传感器最近一个月的监测数据的统计图，如果我采用一次性获取所有的数据，如果传感器的采集周期较短，那么一个月的时间长度将会有一个非常巨大的的数据量，采用一次获取的情况将会使得用户的等待时间非常漫长，所以我们就会在知道数据长度的情况下使用并发请求，在不知道数据长度的情况下使用连续的请求来获取数据，然后在本地合并获取到的数据并绘图，这样，用户只需要等一个请求的时间就可以看到统计图了。用户看到图后非常满意，然后点击了下一个传感器，程序就会重新执行上面的方法。这个过程看起来很好也没什么错对吧？其实，这样处理有可能会造成比较严重的错误，那就是数据污染。
这是我们整个数据处理的流程图，有一点需要注意的是从开始发出的三条线是异步的方法，不在主进程中。当第一个请求完成后，第二个或者其他的请求并没有完成。这时用户点击了新的传感器，我们又会发送一系列的请求到服务器。这时我们的客户端就会收到上一个传感器的数据和新的传感器的数据。然而系统并不能判断这次收到的数据是上一轮的还是这一轮的，都会让这些数据走正常的方法然后展示出来，这样，新旧数据就混在了一起。
解决这个问题的思路很简单，那就是在发行请求前，关闭掉之前发送的所有请求，这样，新的数据就不会被旧的数据所污染。所幸，我们使用比较广的两种ajax插件都有这样的方法，下面就以我比较喜欢的axios为例。
///假设传感器的数据有20页，每页100条
import axios from "axios";
let CancelToken = axios.CancelToken;
let cancel;
function loop(id){///这种请求一般是连续循环的请求
axios.get({
url: "/api/fakePath/",
params: {
id
},
cancelToken: new CancelToken(function executor(c) {///这个函数会传递一个取消的函数进来，这里用cancel来接收
cancel = c;
})
})
}
/// 使用方法： cancel()
let source = CancelToken.source();
function concurrence(arr){///这种是并发多个请求来获取数据
for(let i in arr){
axios.get({
url: "/api/fakePath/",
params: {
id:i
},
cancelToken: source.token
})
}
}
///使用方法，这种可以传一个message作为提示： source.cancel("Operation canceled by the user.");
这样在我们就创建了一系列的异步请求，并且获取或者赋予了取消函数。loop函数因为是连续的请求，一次只有一个，所以使用了新建CancelToken，而并发的情况下，则采用公用一个CancelToken。这样只要在新请求发起前，调用对应的CancelToken函数，就可以完美解决数据污染的问题了
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96215.html
摘要：事件循环背景是一门单线程非阻塞的脚本语言，单线程意味着，代码在执行的任何时候，都只有一个主线程来处理所有的任务。在意识到该问题之际，新特性中的可以让成为一门多线程语言，但实际开发中使用存在着诸多限制。这个地方被称为执行栈。 事件循环（Event Loop） 背景 JavaScript是一门单线程非阻塞的脚本语言，单线程意味着，JavaScript代码在执行的任何时候，都只有一个主线程来...
摘要：在上面我们已经知道浏览器是一帧一帧执行的，在两个执行帧之间，主线程通常会有一小段空闲时间，可以在这个空闲期调用空闲期回调，执行一些任务。另外由于这些堆栈是可以自己控制的，所以可以加入并发或者错误边界等功能。 文章首发于个人博客 前言 2016 年都已经透露出来的概念，这都 9102 年了，我才开始写 Fiber 的文章，表示惭愧呀。不过现在好的是关于 Fiber 的资料已经很丰富了，...
摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...
摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...
摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。 虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...
阅读 2349·2021-11-23 09:51
阅读 2001·2021-10-14 09:43
阅读 2766·2021-09-27 13:35
阅读 1147·2021-09-22 15:54
阅读 2498·2021-09-13 10:36
阅读 3793·2019-08-30 15:56
阅读 3407·2019-08-30 14:09
阅读 1715·2019-08-30 12:57
