Jisl
切图仔
|
react学徒
获得徽章 0
- 萌新向各位大佬请教一个前端的问题。
技术栈react，网页demo如图，
代码demo：
import React, { useState } from 'react';
const Test = () => {
const [data, setData] = useState(undefined);
const [curData, setCurData] = useState(undefined);
const getData = id => {
const delay = id === 1 ? 0 : 2000;
return new Promise(resolve => {
setTimeout(() => {
resolve(id);
}, delay);
})
}
const onClick = async id => {
setData(id);
const data = await getData(id);
setCurData(data);
}
return (
<div>
<button onClick={() => onClick(1)}>获取1的数据</button>
<button onClick={() => onClick(2)}>获取2的数据</button>
<p>理论获取的数据：{data}</p>
<p>实际获取的数据：{curData}</p>
</div>
)
}
export default Test;
如图，点击两个按钮调用的是同一个接口，但是接口响应的时间有快有慢，假如我点击：按钮1---->按钮2--->按钮1，理论上最后展示的应该是按钮1获取的数据，但因为按钮2调用时响应慢，最后按钮2返回的数据就覆盖了，这该怎么解决呢？(不能取消接口请求)展开赞过 121
