项目中怎么封装一个可取消的请求？

Question

用户点击某按钮进行请求后，此时如果又点取消按钮怎么实现把上一次的请求作废，即不让服务端处理该请求？

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

前端的请求取消只是对取消的请求后续返回的结果不做处理。并不是通知服务端去终止这个请求。

前端部分的请求取消，可以借助 AbortController 中止控制器 来实现。

当然如果你使用的是 axios 可以直接用 axios 提供的 signal 属性来取消。Cancellation | Axios Docs

具体实现可以借鉴社区已经发布的一些文章：
axios如何取消重复请求
在vue项目中取消axios请求（单个和全局）

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。