axios CancelToken 取消频繁发送请求的用法和源码解析
前言 做一个Vue的项目时,遇到频繁切换标签的问题。由于不同标签请求的ajax的结果所需时间不同,点击不同标签时,响应时间最慢的数据会覆盖之前响应的数据,显示数据跟所点击标签不对应。当时为了处理这个问题,没想到好方法,只好控制在点击下一个标签前,必须等前一个标签的结果回来之后进行。 后来做API的统一管理时,看到前人写的axios的interceptor里有CancelToken这样一个东西,查了查资料,发现这个可以取消请求,踏破铁鞋无觅处,刚好可以用来处理之前遇到的频繁切换标签的问题。今作一记录,也好更好的理解这个功能。 述求 点击标签时,取消之前正在执行的请求,使得切换标签时,页面得到的是最后请求的结果,而不是响应最慢的结果。 用法 官方案例 使用 CancelToken.source 工厂方法创建 cancel token,像这样: // CancelToken是一个构造函数,用于创建一个cancelToken实例对象 // cancelToken实例对象包含了一个promise属性,值为可以触发取消请求的一个promise const CancelToken = axios . CancelToken ; // 执行source()得到的是一个包含了cancelToken对象和一个取消函数cancel()的对象 // 即 source = {token: