关于react.js:通过闭包巧解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…