通过闭包巧解React Hook中接口请求时序问题

首先看一个简单的场景

// app.tsx
const App = () => {
  const [num, setNum] = useState<number>(1);
  const [list, setList] = useState<number[]>([]);
  useEffect(() => {
    getDataImmediate(num).then(setList);
  }, [num]);
  return (
    <div>
      {list?.join(',')}
      <br />
      <button
        onClick={() => {
          setNum(num + 1);
        }}
      >
        刷新
      </button>
      <br />
      点击次数：{num}
    </div>
  );
};

// api.ts
export const getDataImmediate = (num) => {
  return new Promise((resolve) => resolve([num, num]));
};

点击按钮，调用getDataImmediate模拟ajax请求，传入数字，promise立刻返回数组，然后展示在页面上。

结果符合预期，点n下，就显示n,n。

但是，这逻辑有一个隐藏很深的问题需要考虑，getDataImmediate模拟的是网络请求，那么就有耗时问题，假设因为种种原因，我们在useEffect里面连着调用两次接口，就可能会出现第一个请求返回比第二个请求慢，那么页面展示就有问题了

模拟一下
让接口请求，奇数次500ms返回，偶数次1500ms返回

// app.tsx
const App = () => {
  const [num, setNum] = useState<number>(1);
  const [list, setList] = useState<number[]>([]);
  useEffect(() => {
    getDataRandomTime(num).then(setList);
  }, [num]);
  return (
    <div>
      {list?.join(',')}
      <br />
      <button
        onClick={() => {
          setNum(num + 1);
        }}
      >
        刷新
      </button>
      <br />
      点击次数：{num}
    </div>
  );
};

// api.ts
let n = 1;
export const getDataRandomTime = (num: number) => {
  n++;
  return new Promise<number[]>((resolve) => {
    setTimeout(
      () => {
        resolve([num, num]);
      },
      n % 2 ? 500 : 1500
    );
  });
};

这样问题就出现了，只要我连着点三次，就一定不正确

这个问题在react官方文档上给出了解决办法，通过一个igonre变量来控制

社区也有一些成熟的解决方案比如react-query，ahooks等

但是我之前不知道！！！自己通过歪门邪道解决了

我的解决办法

export function apiWrapper(fn) {
  let id = 1;
  return async (params) => {
    id++;
    const _id = id;
    let res = await fn(params);
    if (_id === id) {
      return res;
    } else {
      throw new Error();
    }
  };
}

很简单对吧，记录调用次数，当接口返回的时候，判断，当前的id与id最大值是否相等。相等就表示是最新的一次调用。不相等就抛出异常。

这下怎么点都不会出问题了🎉🎉🎉🎉

---

在线体验：https://stackblitz.com/edit/r...