当你在很短的时间内多次触发了页面上查询数据的功能,而你请求的接口返回数据又比较慢时,最后显示的数据总是返回最慢的那条数据,而不是你最后请求的数据,这时可以在每次请求之前通过阻止上次请求的方式避免这种情况的发生:
import ...
let controller
export default function Index() {
const [data, setData] = useState([])
const getData = async () => {
if (controller) controller.abort()
controller = new AbortController()
const signal = controller.signal
const res = await request('request-url', {
signal,
})
if (Array.isArray(res)) {
setData(res)
}
}
return (
...
)
}
需要注意的是,AbortController不兼容例如低于57版本的火狐等部分浏览器,如果你的客户有需求的话,只需要安装abortcontroller-polyfill:
yarn add abortcontroller-polyfill -s
然后在页面上引入即可:
import'abortcontroller-polyfill'
......