在開發(fā) web 應(yīng)用程序時(shí)，性能都是必不可少的話題。

對(duì)于webpack打包的單頁(yè)面應(yīng)用程序而言，我們可以采用很多方式來(lái)對(duì)性能進(jìn)行優(yōu)化，比方說(shuō) tree-shaking、模塊懶加載、利用 extrens 網(wǎng)絡(luò)cdn 加速這些常規(guī)的優(yōu)化。

甚至在vue-cli 項(xiàng)目中我們可以使用 --modern 指令生成新舊兩份瀏覽器代碼來(lái)對(duì)程序進(jìn)行優(yōu)化。

而事實(shí)上，緩存一定是提升web應(yīng)用程序有效方法之一，尤其是用戶受限于網(wǎng)速的情況下。提升系統(tǒng)的響應(yīng)能力，降低網(wǎng)絡(luò)的消耗。當(dāng)然，內(nèi)容越接近于用戶，則緩存的速度就會(huì)越快，緩存的有效性則會(huì)越高。

以客戶端而言，我們有很多緩存數(shù)據(jù)與資源的方法，例如 標(biāo)準(zhǔn)的瀏覽器緩存 以及 目前火熱的 Service worker。但是，他們更適合靜態(tài)內(nèi)容的緩存。例如 html，js，css以及圖片等文件。而緩存系統(tǒng)數(shù)據(jù)，我采用另外的方案。

那我現(xiàn)在就對(duì)我應(yīng)用到項(xiàng)目中的各種 api 請(qǐng)求緩存方案，從簡(jiǎn)單到復(fù)雜依次介紹一下。

方案一 數(shù)據(jù)緩存

簡(jiǎn)單的 數(shù)據(jù) 緩存，第一次請(qǐng)求時(shí)候獲取數(shù)據(jù)，之后便使用數(shù)據(jù)，不再請(qǐng)求后端api。代碼如下：

第一行代碼 使用了 es6以上的 Map，如果對(duì)map不是很理解的情況下，你可以參考ECMAScript 6 入門 Set 和 Map 或者 Exploring ES6 關(guān)于 map 和 set的介紹，此處可以理解為一個(gè)鍵值對(duì)存儲(chǔ)結(jié)構(gòu)。

之后 代碼 使用 了 async 函數(shù)，可以將異步操作變得更為方便。你可以參考ECMAScript 6 入門 async函數(shù)來(lái)進(jìn)行學(xué)習(xí)或者鞏固知識(shí)。

代碼本身很容易理解，是利用 Map 對(duì)象對(duì)數(shù)據(jù)進(jìn)行緩存，之后調(diào)用從 Map 對(duì)象來(lái)取數(shù)據(jù)。對(duì)于及其簡(jiǎn)單的業(yè)務(wù)場(chǎng)景，直接利用此代碼即可。

調(diào)用方式：

方案二 promise 緩存

方案一本身是不足的。因?yàn)槿绻紤]同時(shí)兩個(gè)以上的調(diào)用此 api，會(huì)因?yàn)檎?qǐng)求未返回而進(jìn)行第二次請(qǐng)求api。當(dāng)然，如果你在系統(tǒng)中添加類似于 vuex、redux這樣的單一數(shù)據(jù)源框架，這樣的問(wèn)題不太會(huì)遇到，但是有時(shí)候我們想在各個(gè)復(fù)雜組件分別調(diào)用api，而不想對(duì)組件進(jìn)行組件通信數(shù)據(jù)時(shí)候，便會(huì)遇到此場(chǎng)景。

該代碼避免了方案一的同一時(shí)間多次請(qǐng)求的問(wèn)題。同時(shí)也在后端出錯(cuò)的情況下對(duì)promise進(jìn)行了刪除，不會(huì)出現(xiàn)緩存了錯(cuò)誤的promise就一直出錯(cuò)的問(wèn)題。

調(diào)用方式:

該方案是同時(shí)獲取多個(gè)服務(wù)器數(shù)據(jù)的方式。可以同時(shí)獲得多個(gè)數(shù)據(jù)進(jìn)行操作，不會(huì)因?yàn)閱蝹€(gè)數(shù)據(jù)出現(xiàn)問(wèn)題而發(fā)生錯(cuò)誤。

調(diào)用方式

方案四 添加時(shí)間有關(guān)的緩存

往往緩存是有危害的，如果我們?cè)谥佬薷牧藬?shù)據(jù)的情況下，直接把 cache 刪除即可，此時(shí)我們調(diào)用方法就可以向服務(wù)器進(jìn)行請(qǐng)求。這樣我們規(guī)避了前端顯示舊的的數(shù)據(jù)。但是我們可能一段時(shí)間沒(méi)有對(duì)數(shù)據(jù)進(jìn)行操作，那么此時(shí)舊的數(shù)據(jù)就一直存在，那么我們最好規(guī)定個(gè)時(shí)間來(lái)去除數(shù)據(jù)。該方案是采用了 類 持久化數(shù)據(jù)來(lái)做數(shù)據(jù)緩存，同時(shí)添加了過(guò)期時(shí)長(zhǎng)數(shù)據(jù)以及參數(shù)化。代碼如下：首先定義持久化類,該類可以存儲(chǔ) promise 或者 data

方案五 基于修飾器的方案四

和方案四是的解法一致的，但是是基于修飾器來(lái)做。代碼如下：

總結(jié)

api 的緩存機(jī)制與場(chǎng)景在這里也基本上介紹了，基本上能夠完成絕大多數(shù)的數(shù)據(jù)業(yè)務(wù)緩存，在這里我也想請(qǐng)教教大家，有沒(méi)有什么更好的解決方案，或者這篇文章中有什么不對(duì)的地方，歡迎指正，在這里感謝各位了。

想要了解更多可以點(diǎn)擊：