聊聊 Ahooks 是怎么解决用户多次提交问题？

本文来探索一下 ahooks 的 useLockFn。,试想一下，有这么一个场景，有一个表单，你可能多次提交，就很可能导致结果不正确。,解决这类问题的方法有很多，比如添加 loading，在第一次点击之后就无法再次点击。另外一种方法就是给请求异步函数添加上一个静态锁，防止并发产生。这就是 ahooks 的 useLockFn 做的事情。,useLockFn 用于给一个异步函数增加竞态锁，防止并发执行。,它的源码比较简单，如下所示：,可以看到，它的入参是异步函数，返回的是一个增加了竞态锁的函数。通过 lockRef 做一个标识位，初始化的时候它的值为 false。当正在请求，则设置为 true，从而下次再调用这个函数的时候，就直接 return，不执行原函数，从而达到加锁的目的。,虽然实用，但缺点很明显，我需要给每一个需要添加竞态锁的请求异步函数都手动加一遍。那有没有比较通用和方便的方法呢？,答案是可以通过 axios 自动取消重复请求。,对于原生的 XMLHttpRequest 对象发起的 HTTP 请求，可以调用 XMLHttpRequest 对象的 abort 方法。,那么我们项目中常用的 axios 呢？它其实底层也是用的 XMLHttpRequest 对象，它对外暴露取消请求的 API 是 CancelToken。可以使用如下：,另外一种使用的方法是调用 CancelToken 的构造函数来创建 CancelToken，具体使用如下：,知道了如何取消请求，那怎么做到自动取消呢？答案是通过 axios 的拦截器。,具体的做法如下：,第一步，定义几个重要的辅助函数。,这里我认为，如果有需要的话，可以暴露一个 API 给开发者进行自定义重复的规则。这里我们先根据请求方法、url、以及参数生成唯一的 key 去做。,第二步，添加请求拦截器。,第二步，添加响应拦截器。,到这一步，我们就通过 axios 完成了自动取消重复请求的功能。,虽然可以通过类似 useLockFn 这样的 hook或方法给请求函数添加竞态锁的方式解决重复请求的问题。但这种还是需要依赖于开发者的习惯，如果没有一些规则的约束，很难避免问题。,通过 axios 拦截器以及其 CancelToken 功能，我们能够在拦截器中自动将已发的请求取消，当然假如有一些接口就是需要重复发送请求，可以考虑加一下白名单功能，让请求不进行取消。,[1]详情: https://github.com/GpingFeng/hooks。