useLockFn

作用

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

原理

通过 useRef 创建一个锁，当锁为 true 时，不执行异步函数，否则执行异步函数

源码

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) => {
      // 如果锁为 true，直接返回
      if (lockRef.current) return
      // 锁为 false，执行异步函数, 并将锁置为 true
      lockRef.current = true
      try {
        const ret = await fn(...args)
        // 异步函数执行完毕，将锁置为 false
        lockRef.current = false
        return ret
      } catch (e) {
        // 异步函数执行出错，将锁置为 false
        lockRef.current = false
        throw e
      }
    },
    [fn]
  )
}

export default useLockFn