Axios如何实现取消重复发送的请求实例剖析？

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

目录+前言+一、如何取消请求+二、如何判断重复请求+三、如何取消重复请求+3.1 定义辅助函数+3.2 设置请求拦截器+3.3 设置响应拦截器+四、CancelToken 的工作原理+五、总结+六、参考资料

目录

• 前言
• 一、如何取消请求
• 二、如何判断重复请求
• 三、如何取消重复请求
• 3.1 定义辅助函数
  
• 3.2 设置请求拦截器
  
• 3.3 设置响应拦截器
  
• 四、CancelToken 的工作原理
• 五、总结
• 六、参考资源

前言

在 Web 项目开发过程中，我们经常会遇到重复请求的场景，如果系统不对重复的请求进行处理，则可能会导致系统出现各种问题。比如重复的 post 请求可能会导致服务端产生两笔记录。那么重复请求是如何产生的呢？这里我们举 2 个常见的场景：

• 假设页面中有一个按钮，用户点击按钮后会发起一个 AJAX 请求。如果未对该按钮进行控制，当用户快速点击按钮时，则会发出重复请求。
• 假设在考试结果查询页面中，用户可以根据 “已通过”、“未通过” 和 “全部” 3 种查询条件来查询考试结果。