如何实现axios取消请求和避免重复请求的技术探讨？

本文共计1271个文字，预计阅读时间需要6分钟。

目录+前言+核心：CancelToken+实际应用和封装+一些小细节+前言+在实际项目中，我们可能需要对请求进行防抖处理。这里主要是为了阻止用户在特定情况下短时间内重复点击某个按钮。

目录

• 前言
• 核心——CancelToken
• 实际应用和封装
• 一些小细节

前言

在实际项目中，我们可能需要对请求进行“防抖”处理。这里主要是为了阻止用户在某些情况下短时间内重复点击某个按钮，导致前端向后端重复发送多次请求。这里我列举两种比较常见的实际情况：

• PC端 - 用户双击搜索按钮，可能会触发两次搜索请求
• 移动端 - 因移动端没有点击延迟，所以极易造成误操作或多操作，造成请求重发

以上情况有可能在有Loading遮罩时依然发生，所以我们要考虑前端阻止重复请求的方法。

核心——CancelToken

在Axios中取消请求最核心的方法是CanelToken。