猿问

Vue两个路由下的两个组件用同一份Vuex中的数据,如何才能不重复发送http请求?

小弟不才,正在学习Vue中,打算拿豆瓣的API来练练手写个单页面应用
遇到了个关于http请求方面的问题。
如图所示:
我需要在电影列表组件和展示完整电影列表的路由页面都使用同一份用豆瓣api请求回来的放在vuex中的电影列表数据。

我是在图示里的组件create()时调用action来获取数据的,在展示完整电影列表的路由页面我也打算在需要此数据的组件create()时请求。但是哪一个页面路由组件会被先创建(通过浏览器地址直接输入的话)无法确定
就会有一个问题。
在打开第一个页面的时候快速跳转至第二个需要同样数据的页面,此时第一个页面中组件的http请求已经发出但数据仍然未回来,vuex中没有数据,这时,我怎样知道数据正在请求中,而不需要再进行一次请求

我自己想到两个方法,但还想要各位赐教更好的方法:

  1. 把http请求的action调用放在包含此<router-view>的父级组件的create()中,在子组件里就不用担心是否进行过请求是。

  2. 我的http请求是用vue-resource来进行的,可以进行一次请求之后,把vue-resource返回的Promise用变量保存起来,并在Resolved后把变量变为假值,再次调用的时候看是否有保存promise再决定是否再次请求。可是如果别的地方也有类似的问题的话,就得写类似的东西。如果要封装的话,有些请求,请求发送的参数不同,存储promise就会变得麻烦了。

所以请教各位是否有更好的办法,或者说是一个更好的业务逻辑思想来纠正我的错误。


慕丝7291255
浏览 1318回答 2
2回答

烙印99

这两个方法也不见得会更好如果不访问那几个需要这数据的组件,那么这部分数据是不是就多余的数据,而如果你其他页面有这样的逻辑呢?是不是就很多无用数据。那岂不是一直都是历史数据,如果我此刻真的需要新数据呢?在打开第一个页面的时候快速跳转至第二个需要同样数据的页面,此时第一个页面中组件的http请求已经发出但数据仍然未回来,vuex中没有数据,这时,我怎样知道数据正在请求中,而不需要再进行一次请求?我个人的观点是,这是个伪需求。首先这对服务器来说没什么影响,浏览器有同源TCP数量限制,相同请求还有缓存锁,其次服务器本身一般还会做缓存,所以首先是不会对服务器产生压力。而对于客户端而言,打开第一个页面的时候快速跳转至第二个需要同样数据的页面这种事情发生的有多频繁?我认为并不频繁。发生后会有什么影响?可能就浪费点流量。所以我不认为是一个问题,因为你要解决此问题,会引发更多的问题。其次如果你确实需要,你可以访问同一个Promise,不需要什么变量真假值,Promise本来就承诺了结果一定确定,就不会更改。但你需要考虑时效的问题,避免一直访问历史数据。

有只小跳蛙

在数据请求完成之前做个loading,不让用户跳转。完成后=》有数据=》可跳转一次http请求最多3000ms吧
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答