鍍金池/ 問答/HTML/ Vue兩個(gè)路由下的兩個(gè)組件用同一份Vuex中的數(shù)據(jù),如何才能不重復(fù)發(fā)送http請(qǐng)

Vue兩個(gè)路由下的兩個(gè)組件用同一份Vuex中的數(shù)據(jù),如何才能不重復(fù)發(fā)送http請(qǐng)求?

小弟不才,正在學(xué)習(xí)Vue中,打算拿豆瓣的API來練練手寫個(gè)單頁(yè)面應(yīng)用
遇到了個(gè)關(guān)于http請(qǐng)求方面的問題。
如圖所示:
我需要在電影列表組件和展示完整電影列表的路由頁(yè)面都使用同一份用豆瓣api請(qǐng)求回來的放在vuex中的電影列表數(shù)據(jù)。
clipboard.png

我是在圖示里的組件create()時(shí)調(diào)用action來獲取數(shù)據(jù)的,在展示完整電影列表的路由頁(yè)面我也打算在需要此數(shù)據(jù)的組件create()時(shí)請(qǐng)求。但是哪一個(gè)頁(yè)面路由組件會(huì)被先創(chuàng)建(通過瀏覽器地址直接輸入的話)無法確定。
就會(huì)有一個(gè)問題。
在打開第一個(gè)頁(yè)面的時(shí)候快速跳轉(zhuǎn)至第二個(gè)需要同樣數(shù)據(jù)的頁(yè)面,此時(shí)第一個(gè)頁(yè)面中組件的http請(qǐng)求已經(jīng)發(fā)出但數(shù)據(jù)仍然未回來,vuex中沒有數(shù)據(jù),這時(shí),我怎樣知道數(shù)據(jù)正在請(qǐng)求中,而不需要再進(jìn)行一次請(qǐng)求?

我自己想到兩個(gè)方法,但還想要各位賜教更好的方法:

  1. 把http請(qǐng)求的action調(diào)用放在包含此<router-view>的父級(jí)組件的create()中,在子組件里就不用擔(dān)心是否進(jìn)行過請(qǐng)求是。
  2. 我的http請(qǐng)求是用vue-resource來進(jìn)行的,可以進(jìn)行一次請(qǐng)求之后,把vue-resource返回的Promise用變量保存起來,并在Resolved后把變量變?yōu)榧僦?,再次調(diào)用的時(shí)候看是否有保存promise再?zèng)Q定是否再次請(qǐng)求??墒侨绻麆e的地方也有類似的問題的話,就得寫類似的東西。如果要封裝的話,有些請(qǐng)求,請(qǐng)求發(fā)送的參數(shù)不同,存儲(chǔ)promise就會(huì)變得麻煩了。

所以請(qǐng)教各位是否有更好的辦法,或者說是一個(gè)更好的業(yè)務(wù)邏輯思想來糾正我的錯(cuò)誤。

回答
編輯回答
喵小咪

在數(shù)據(jù)請(qǐng)求完成之前做個(gè)loading,不讓用戶跳轉(zhuǎn)。完成后=》有數(shù)據(jù)=》可跳轉(zhuǎn)
一次http請(qǐng)求最多3000ms吧

2018年4月10日 09:08
編輯回答
吢丕

這兩個(gè)方法也不見得會(huì)更好

  1. 如果不訪問那幾個(gè)需要這數(shù)據(jù)的組件,那么這部分?jǐn)?shù)據(jù)是不是就多余的數(shù)據(jù),而如果你其他頁(yè)面有這樣的邏輯呢?是不是就很多無用數(shù)據(jù)。
  2. 那豈不是一直都是歷史數(shù)據(jù),如果我此刻真的需要新數(shù)據(jù)呢?
在打開第一個(gè)頁(yè)面的時(shí)候快速跳轉(zhuǎn)至第二個(gè)需要同樣數(shù)據(jù)的頁(yè)面,此時(shí)第一個(gè)頁(yè)面中組件的http請(qǐng)求已經(jīng)發(fā)出但數(shù)據(jù)仍然未回來,vuex中沒有數(shù)據(jù),這時(shí),我怎樣知道數(shù)據(jù)正在請(qǐng)求中,而不需要再進(jìn)行一次請(qǐng)求?

我個(gè)人的觀點(diǎn)是,這是個(gè)偽需求。首先這對(duì)服務(wù)器來說沒什么影響,瀏覽器有同源TCP數(shù)量限制,相同請(qǐng)求還有緩存鎖,其次服務(wù)器本身一般還會(huì)做緩存,所以首先是不會(huì)對(duì)服務(wù)器產(chǎn)生壓力。而對(duì)于客戶端而言,打開第一個(gè)頁(yè)面的時(shí)候快速跳轉(zhuǎn)至第二個(gè)需要同樣數(shù)據(jù)的頁(yè)面這種事情發(fā)生的有多頻繁?我認(rèn)為并不頻繁。發(fā)生后會(huì)有什么影響?可能就浪費(fèi)點(diǎn)流量。所以我不認(rèn)為是一個(gè)問題,因?yàn)槟阋鉀Q此問題,會(huì)引發(fā)更多的問題。

其次如果你確實(shí)需要,你可以訪問同一個(gè)Promise,不需要什么變量真假值,Promise本來就承諾了結(jié)果一定確定,就不會(huì)更改。但你需要考慮時(shí)效的問題,避免一直訪問歷史數(shù)據(jù)。

2018年2月6日 19:40