react hooks 封装任务队列方法

封装任务队列方法可以帮助你更好地管理异步任务和同步任务的执行。当你使用异步API调用获取数据或执行远程操作时，使用任务队列可以按照预期的顺序排队和处理这些调用。这样可以确保按照预期的顺序处理响应，避免并行调用导致的竞争条件和错误。

下面是使用React封装的hooks，想法是包裹一个回调方法，方便修改之前的逻辑，代码入侵小。

// hooks.jsimport { useEffect, useState } from 'react';

/**
 * 任务队列方法
 * @param fn 回调的函数
 * @param options {Object} delay: 间隔时间, immediate: 是否在首次渲染时立即执行
 * @returns {function(...[*]): void}
 */
export const useTaskQueueFn = (fn, options = { delay: 0, immediate: true }) => {
  const { delay, immediate } = options || {};
  const [tasks, setTasks] = useState([]);
  const [running, setRunning] = useState(false);

  const callback = (params) => new Promise((resolve) => {
    let wait = Number(delay) || 0;
    if (!tasks.length && running && immediate) {
      wait = 0;
    }

    const timer = setTimeout(async () => {
      clearTimeout(timer);

      const res = await fn?.(...params);

      resolve(res);
    }, wait);
  });
  useEffect(() => {
    // 正在运行不执行
    if (running) {
      return;
    }
    // 任务为空不执行
    if (!tasks.length) {
      return;
    }

    const [latest, ...rest] = tasks;

    setRunning(true);
    setTasks(rest);

    callback(latest).finally(() => setRunning(false));
  }, [tasks.length, running]);

  return (...args) => setTasks((v) => [...v, args]);
};

import { useTaskQueueFn } from './hooks';

// 扫码回调
const handle = useTaskQueueFn(async () => {
  // do something
});

完成~