【JS】Axios取消未完成请求解决Tab频繁切换数据问题

一、场景描述 

 Tab切换频率较低、数据返回速度理想的情况下，几乎不用考虑这个问题。切换频率高如果不处理未完成的请求不仅会严重影响页面性能，由于浏览器并发请求限制，也可能会造成后续请求超时。另外一个较为直观的业务影响是，频繁切换也会造成数据渲染错误，如下图：当前已切换到待付款，但是渲染的数据是前面请求的已完成的数据。

二、解决方案原理：

 利用 Javascript XMLHttpRequest 对象上的 abort 方法，终止已发出的请求。MDN上关于此方法的解释：当一个请求被终止，它的  readyState 将被置为 XMLHttpRequest.UNSENT (0)，并且请求的 status 置为 0。

而我们业务里的场景，需要在发出请求时，收集请求集合，存储一个cancel函数。然后在请求前遍历这个集合并调用cancel函数，取消在此之前的所有请求。

三、axios CancelToken用法

那么在axios中怎么中止http请求？先上axios官方文档的用法。Tips：可以使用同一个 cancel token 取消多个请求。

可以使用 CancelToken.source 工厂方法创建 cancel