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

最新推荐文章于 2024-08-14 18:01:44 发布

JavaMonsterr

最新推荐文章于 2024-08-14 18:01:44 发布

阅读量441

点赞数 1

分类专栏： Java 程序员计算机文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/JavaMonsterr/article/details/125209557

版权

本文介绍了 Ahooks 中的 useLockFn 和如何利用 axios 自动取消重复请求，以解决前端表单多次提交的问题。通过源码分析 useLockFn 的工作原理，并展示了使用 axios 拦截器实现自动取消重复请求的详细步骤。

摘要由CSDN通过智能技术生成

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

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

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

本文来探索一下 ahooks 的 useLockFn。

场景

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

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

useLockFn

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

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

import { useRef, useCallback } from 'react';
// 用于给一个异步函数增加竞态锁，防止并发执行。
function useLockFn<P extends any[] = any[], V extends any = any>(fn: (...args: P) => Promise<V>) {
  // 是否现在处于一个锁中
  const lockRef = useRef(false);
  // 返回的是增加了竞态锁的函数
  return useCallback(
    async (...args: P) =>