我正在开发一个带有多张卡的Web应用程序。当一张卡片被选中时,一些数据将被加载到Map上。有些卡可能加载速度比其他卡慢(其中一些卡涉及更多数据和更多计算)。
问题是,如果选择了具有更多数据的卡,并且之后用户选择了具有更少数据的另一张卡(同时对第一张卡的请求仍在加载),则可能存在对第二张卡的请求加载得比第一张卡快的情况。因此,基本上第二张卡的数据在Map上加载一小段时间,然后,当第一个请求也完成加载时,Map上的数据被第一张卡的信息替换(即使第二张卡是当前选择的一张卡)。
我尝试在另一个请求被触发时中止该请求。类似于:
const req = getCardData(id)
...
req.abort()
但是请求仍然正常完成,getCardData.matchFulfilled
仍然被调用。
我想尝试检查加载的数据是否针对当前选定的卡,但这确实存在问题,特别是因为它可能发生在不同的请求中(卡加载部分可能发生在应用程序的不同部分,并且在第一个完成后可能会触发一些额外的请求)。
另外,我可能没有所有这些数据可用,因为一些请求是计算的FE侧,对于那些我没有真正的id可用。使它可用需要相当多的工作,只是存储和传递了大量的函数和组件的id,唯一的目的是检查最后一个请求响应是否是最后一个触发的,所以我真的很想有另一种方法,如果有任何。
我也读了this question (and answers)和this github issue,但它似乎没有为懒惰查询给予一个好的选择。如果放弃不是一种选择,我愿意接受其他选择,但我希望有一个通用的选择(如果可能的话)
谢谢你的建议!
2条答案
按热度按时间oxcyiej71#
为什么不使用RTK Query?它维护一个缓存,当前显示在屏幕上的钩子将指向与查询条件(在本例中是id)相匹配该高速缓存条目。您可以在transformResponse中进行后期处理。
dhxwm5r42#
在github上得到了一点帮助。最后用的是
供参考here is the discussion on github