前端页面上会有一些交互元素短时间内会被多次点击，如果其中涉及到请求接口，可能会存在重复发送请求的场景。
当然你也可以简单地缓存一个变量去防止重复点击直至再次被允许，但这会导致一个问题，即我们的请求是以第一次点击时页面的数据为准的。
有时侯我们可能更想以页面当前的数据为准，这时我们就可以利用axios的这一特性，取消之前发送的过期请求。
具体代码如下
<html>
<body>
<button onclick="get()">Click</button>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const CancelToken = axios.CancelToken;
let cancel;
function get() {
if (cancel) cancel();
axios.get('https://www.test.com', {
cancelToken: new CancelToken(function (c) {
cancel = c;
})
});
}
</script>
</html>
可以看到如果我们重复点击按钮，则之前未到达的axios请求会被取消，这样就避免了重复请求的开销。