关于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…