ahooks解决用户多次提交方法示例.docx

第

ahooks解决用户多次提交方法示例

目录引言场景useLockFn缺点axios自动取消重复请求axios取消请求如何自动取消重复的请求思考与总结

引言

本文是深入浅出ahooks源码系列文章的第四篇，这个系列的目标主要有以下几点：

加深对Reacthooks的理解。学习如何抽象自定义hooks。构建属于自己的Reacthooks工具库。培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。

注：本系列对ahooks的源码解析是基于v3.3.13。自己folk了一份源码，主要是对源码做了一些解读，可见详情。

系列文章：

大家都能看得懂的源码（一）ahooks整体架构篇如何使用插件化机制优雅的封装你的请求hookahooks是怎么解决React的闭包问题的？

本文来探索一下ahooks的useLockFn。

场景

试想一下，有这么一个场景，有一个表单，你可能多次提交，就很可能导致结果不正确。

解决这类问题的方法有很多，比如添加loading，在第一次点击之后就无法再次点击。另外一种方法就是给请求异步函数添加上一个静态锁，防止并发产生。这就是ahooks的useLockFn做的事情。

useLockFn

useLockFn用于给一个异步函数增加竞态锁，防止并发执行。

它的源码比较简单，如下所示：

import{useRef,useCallback}fromreact;

//用于给一个异步函数增加竞态锁，防止并发执行。

functionuseLockFnPextendsany[]=any[],Vextendsany=any(fn:(...args:P)=PromiseV){

//是否现在处于一个锁中

constlockRef=useRef(false);

//返回的是增加了竞态锁的函数

returnuseCallback(

async(...args:P)={

//判断请求是否正在进行

if(lockRef.current)return;

//请求中

lockRef.current=true;

try{

//执行原有请求

constret=awaitfn(...args);

//请求完成，状态锁设置为false

lockRef.current=false;

returnret;

}catch(e){

//请求失败，状态锁设置为false

lockRef.current=false;

throwe;

[fn],

exportdefaultuseLockFn;

可以看到，它的入参是异步函数，返回的是一个增加了竞态锁的函数。通过lockRef做一个标识位，初始化的时候它的值为false。当正在请求，则设置为true，从而下次再调用这个函数的时候，就直接return，不执行原函数，从而达到加锁的目的。

缺点

虽然实用，但缺点很明显，我需要给每一个需要添加竞态锁的请求异步函数都手动加一遍。那有没有比较通用和方便的方法呢？

答案是可以通过axios自动取消重复请求。

axios自动取消重复请求

axios取消请求

对于原生的XMLHttpRequest对象发起的HTTP请求，可以调用XMLHttpRequest对象的abort方法。

那么我们项目中常用的axios呢？它其实底层也是用的XMLHttpRequest对象，它对外暴露取消请求的API是CancelToken。可以使用如下：

constCancelToken=axios.CancelToken;

constsource=CancelToken.source();

axios.post(/user/12345,{

name:gopal

cancelToken:source.token

source.cancel(Operationcanceledbytheuser.);//取消请求，参数是可选的

另外一种使用的方法是调用CancelToken的构造函数来创建CancelToken，具体使用如下：

constCancelToken=axios.CancelToken;

letcancel;

axios.get(/