首先看一个简略的场景
// app.tsxconst 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.tsexport const getDataImmediate = (num) => { return new Promise((resolve) => resolve([num, num]));};点击按钮，调用getDataImmediate模仿ajax申请，传入数字，promise立即返回数组，而后展现在页面上。
后果合乎预期，点n下，就显示n,n。
然而，这逻辑有一个暗藏很深的问题须要思考，getDataImmediate模仿的是网络申请，那么就有耗时问题，假如因为种种原因，咱们在useEffect外面连着调用两次接口，就可能会呈现第一个申请返回比第二个申请慢，那么页面展现就有问题了
模仿一下
让接口申请，奇数次500ms返回，偶数次1500ms返回
// app.tsxconst 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.tslet 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...