react axios 同一个接口(传不同参数),频繁操作,上一个请求返回比当前请求返回慢,导致当前页显示的上一次请求数据


 

Bug描述:多个Tabs页面,访问同一个接口,参数不一样,点击上一个TabA,发送请求A,接着继续点击TabB,发送请求B, 页面应该显示B请求返回的数据,但是页面返回的是A请求的数据

原因:A请求返回速度慢于B请求, A请求和B请求共用一个方法,渲染的是同一个状态,导致A请求数据覆盖了B请求数据

解决办法:在点击TabB时,查看是否有未发送成功的请求,并取消还在发送中的请求,也就是关闭请求A

 

axios提供了取消请求的配置:`cancelToken` 指定用于取消请求的 cancel token

 // (查看后面的 Cancellation 这节了解更多) cancelToken: new CancelToken(function (cancel) { })

 

 

 

 

 

 

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM