前端页面上会有一些交互元素短时间内会被多次点击,如果其中涉及到请求接口,可能会存在重复发送请求的场景。
当然你也可以简单地缓存一个变量去防止重复点击直至再次被允许,但这会导致一个问题,即我们的请求是以第一次点击时页面的数据为准的。
有时侯我们可能更想以页面当前的数据为准,这时我们就可以利用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请求会被取消,这样就避免了重复请求的开销。