【W(wǎng)eb技術(shù)】783- 前端 api 請求緩存的 5 種方案，減少性能損耗！
作者：wsafight，原文：https://github.com/wsafight/personBlog/issues/2
在開發(fā) web 應(yīng)用程序時，性能都是必不可少的話題。
對于webpack打包的單頁面應(yīng)用程序而言，我們可以采用很多方式來對性能進(jìn)行優(yōu)化，比方說 tree-shaking、模塊懶加載、利用 extrens 網(wǎng)絡(luò)cdn 加速這些常規(guī)的優(yōu)化。
甚至在vue-cli 項(xiàng)目中我們可以使用 --modern 指令生成新舊兩份瀏覽器代碼來對程序進(jìn)行優(yōu)化。
而事實(shí)上，緩存一定是提升web應(yīng)用程序有效方法之一，尤其是用戶受限于網(wǎng)速的情況下。提升系統(tǒng)的響應(yīng)能力，降低網(wǎng)絡(luò)的消耗。當(dāng)然，內(nèi)容越接近于用戶，則緩存的速度就會越快，緩存的有效性則會越高。
以客戶端而言，我們有很多緩存數(shù)據(jù)與資源的方法，例如 標(biāo)準(zhǔn)的瀏覽器緩存 以及 目前火熱的 Service worker。但是，他們更適合靜態(tài)內(nèi)容的緩存。例如 html，js，css以及圖片等文件。而緩存系統(tǒng)數(shù)據(jù)，我采用另外的方案。
那我現(xiàn)在就對我應(yīng)用到項(xiàng)目中的各種 api 請求緩存方案，從簡單到復(fù)雜依次介紹一下。
方案一 數(shù)據(jù)緩存
簡單的 數(shù)據(jù) 緩存，第一次請求時候獲取數(shù)據(jù)，之后便使用數(shù)據(jù)，不再請求后端api。代碼如下：
const?dataCache?=?new?Map()
async?getWares()?{
????let?key?=?'wares'
????//?從data?緩存中獲取?數(shù)據(jù)
????let?data?=?dataCache.get(key)
????if?(!data)?{
????????//?沒有數(shù)據(jù)請求服務(wù)器
????????const?res?=?await?request.get('/getWares')
????????//?其他操作
????????...
????????data?=?...
????????//?設(shè)置數(shù)據(jù)緩存
????????dataCache.set(key,?data)
????}
????return?data
}?
第一行代碼 使用了 es6以上的 Map，如果對map不是很理解的情況下，你可以參考ECMAScript 6 入門 Set 和 Map 或者 Exploring ES6 關(guān)于 map 和 set的介紹，此處可以理解為一個鍵值對存儲結(jié)構(gòu)。
之后 代碼 使用 了 async 函數(shù)，可以將異步操作變得更為方便。你可以參考ECMAScript 6 入門 async函數(shù)來進(jìn)行學(xué)習(xí)或者鞏固知識。
代碼本身很容易理解，是利用 Map 對象對數(shù)據(jù)進(jìn)行緩存，之后調(diào)用從 Map 對象來取數(shù)據(jù)。對于及其簡單的業(yè)務(wù)場景，直接利用此代碼即可。
調(diào)用方式：
getWares().then(?...?)
//?第二次調(diào)用?取得先前的data
getWares().then(?...?)
方案二 promise 緩存
方案一本身是不足的。因?yàn)槿绻紤]同時兩個以上的調(diào)用此 api，會因?yàn)檎埱笪捶祷囟M(jìn)行第二次請求api。當(dāng)然，如果你在系統(tǒng)中添加類似于 vuex、redux這樣的單一數(shù)據(jù)源框架，這樣的問題不太會遇到，但是有時候我們想在各個復(fù)雜組件分別調(diào)用api，而不想對組件進(jìn)行組件通信數(shù)據(jù)時候，便會遇到此場景。
const?promiseCache?=?new?Map()
getWares()?{
????const?key?=?'wares'
????let?promise?=?promiseCache.get(key);
????//?當(dāng)前promise緩存中沒有?該promise
????if?(!promise)?{
????????promise?=?request.get('/getWares').then(res?=>?{
????????????//?對res?進(jìn)行操作
????????????...
????????}).catch(error?=>?{
????????????//?在請求回來后，如果出現(xiàn)問題，把promise從cache中刪除?以避免第二次請求繼續(xù)出錯S
????????????promiseCache.delete(key)
????????????return?Promise.reject(error)
????????})
????}
????//?返回promise
????return?promise
}
該代碼避免了方案一的同一時間多次請求的問題。同時也在后端出錯的情況下對promise進(jìn)行了刪除，不會出現(xiàn)緩存了錯誤的promise就一直出錯的問題。
調(diào)用方式:
getWares().then(?...?)
//?第二次調(diào)用?取得先前的promise
getWares().then(?...?)
方案三 多promise 緩存
該方案是同時需要 一個以上 的api請求的情況下，對數(shù)據(jù)同時返回，如果某一個api發(fā)生錯誤的情況下。均不返回正確數(shù)據(jù)。
const?querys?={
????wares:?'getWares',
????skus:?'getSku'
}
const?promiseCache?=?new?Map()
async?queryAll(queryApiName)?{
????//?判斷傳入的數(shù)據(jù)是否是數(shù)組
????const?queryIsArray?=?Array.isArray(queryApiName)
????//?統(tǒng)一化處理數(shù)據(jù)，無論是字符串還是數(shù)組均視為數(shù)組
????const?apis?=?queryIsArray???queryApiName?:?[queryApiName]
????//?獲取所有的?請求服務(wù)
????const?promiseApi?=?[]
????apis.forEach(api?=>?{
????????//?利用promise?
????????let?promise?=?promiseCache.get(api)
????????if?(promise)?{
????????????//?如果?緩存中有，直接push
????????????promise.push(promise)
????????}?else?{
?????????????promise?=?request.get(querys[api]).then(res?=>?{
????????????????//?對res?進(jìn)行操作
????????????????...
????????????????}).catch(error?=>?{
????????????????//?在請求回來后，如果出現(xiàn)問題，把promise從cache中刪除
????????????????promiseCache.delete(api)
????????????????return?Promise.reject(error)
????????????})
????????????promiseCache.set(api,?promise)
????????????promiseCache.push(promise)
????????}
????})
????return?Promise.all(promiseApi).then(res?=>?{
????????//?根據(jù)傳入的?是字符串還是數(shù)組來返回數(shù)據(jù)，因?yàn)楸旧矶际菙?shù)組操作
????????//?如果傳入的是字符串，則需要取出操作
????????return?queryIsArray???res?:?res[0]
????})
}
該方案是同時獲取多個服務(wù)器數(shù)據(jù)的方式?？梢酝瑫r獲得多個數(shù)據(jù)進(jìn)行操作，不會因?yàn)閱蝹€數(shù)據(jù)出現(xiàn)問題而發(fā)生錯誤。
調(diào)用方式
queryAll('wares').then(?...?)
//?第二次調(diào)用?不會去取?wares，只會去skus
queryAll(['wares',?'skus']).then(?...?)
方案四 添加時間有關(guān)的緩存
往往緩存是有危害的，如果我們在知道修改了數(shù)據(jù)的情況下，直接把 cache 刪除即可，此時我們調(diào)用方法就可以向服務(wù)器進(jìn)行請求。這樣我們規(guī)避了前端顯示舊的的數(shù)據(jù)。但是我們可能一段時間沒有對數(shù)據(jù)進(jìn)行操作，那么此時舊的數(shù)據(jù)就一直存在，那么我們最好規(guī)定個時間來去除數(shù)據(jù)。該方案是采用了 類 持久化數(shù)據(jù)來做數(shù)據(jù)緩存，同時添加了過期時長數(shù)據(jù)以及參數(shù)化。代碼如下：首先定義持久化類,該類可以存儲 promise 或者 data
class?ItemCache()?{
????construct(data,?timeout)?{
????????this.data?=?data
????????//?設(shè)定超時時間，設(shè)定為多少秒
????????this.timeout?=?timeout
????????//?創(chuàng)建對象時候的時間，大約設(shè)定為數(shù)據(jù)獲得的時間
????????this.cacheTime?=?(new?Date()).getTime
????}
}
然后我們定義該數(shù)據(jù)緩存。我們采用Map 基本相同的api
class?ExpriesCache?{
????//?定義靜態(tài)數(shù)據(jù)map來作為緩存池
????static?cacheMap?=??new?Map()
????//?數(shù)據(jù)是否超時
????static?isOverTime(name)?{
????????const?data?=?ExpriesCache.cacheMap.get(name)
????????//?沒有數(shù)據(jù)?一定超時
????????if?(!data)?return?true
????????//?獲取系統(tǒng)當(dāng)前時間戳
????????const?currentTime?=?(new?Date()).getTime()????????
????????//?獲取當(dāng)前時間與存儲時間的過去的秒數(shù)
????????const?overTime?=?(currentTime?-?data.cacheTime)?/?1000
????????//?如果過去的秒數(shù)大于當(dāng)前的超時時間，也返回null讓其去服務(wù)端取數(shù)據(jù)
????????if?(Math.abs(overTime)?>?data.timeout)?{
????????????//?此代碼可以沒有，不會出現(xiàn)問題，但是如果有此代碼，再次進(jìn)入該方法就可以減少判斷。
????????????ExpriesCache.cacheMap.delete(name)
????????????return?true
????????}
????????//?不超時
????????return?false
????}
????//?當(dāng)前data在?cache?中是否超時
????static?has(name)?{
????????return?!ExpriesCache.isOverTime(name)
????}
????//?刪除?cache?中的?data
????static?delete(name)?{
????????return?ExpriesCache.cacheMap.delete(name)?
????}
????//?獲取
????static?get(name)?{
????????const?isDataOverTiem?=?ExpriesCache.isOverTime(name)
????????//如果?數(shù)據(jù)超時，返回null，但是沒有超時，返回數(shù)據(jù)，而不是?ItemCache?對象
????????return?isDataOverTiem???null?:?ExpriesCache.cacheMap.get(name).data
????}
????//?默認(rèn)存儲20分鐘
????static?set(name,?data,?timeout?=?1200)?{
????????//?設(shè)置?itemCache
????????const?itemCache?=?mew?ItemCache(data,?timeout)
????????//緩存
????????ExpriesCache.cacheMap.set(name,?itemCache)
????}
}
此時數(shù)據(jù)類以及操作類 都已經(jīng)定義好,我們可以在api層這樣定義
//?生成key值錯誤
const?generateKeyError?=?new?Error("Can't?generate?key?from?name?and?argument")
//?生成key值
function?generateKey(name,?argument)?{
????//?從arguments?中取得數(shù)據(jù)然后變?yōu)閿?shù)組
????const?params?=?Array.from(argument).join(',')
????try{
????????//?返回?字符串，函數(shù)名?+?函數(shù)參數(shù)
????????return?`${name}:${params}`
????}catch(_)?{
????????//?返回生成key錯誤
????????return?generateKeyError
????}
}
async?getWare(params1,?params2)?{
????//?生成key
????const?key?=?generateKey('getWare',?[params1,?params2])?
????//?獲得數(shù)據(jù)
????let?data?=?ExpriesCache.get(key)
????if?(!data)?{
????????const?res?=?await?request('/getWares',?{params1,?params2})
????????//?使用?10s?緩存，10s之后再次get就會?獲取null?而從服務(wù)端繼續(xù)請求
????????ExpriesCache.set(key,?res,?10)
????}
????return?data
}
該方案使用了 過期時間 和 api 參數(shù)不同而進(jìn)行 緩存的方式。已經(jīng)可以滿足絕大部分的業(yè)務(wù)場景。
調(diào)用方式
getWares(1,2).then(?...?)
//?第二次調(diào)用?取得先前的promise
getWares(1,2).then(?...?)
//?不同的參數(shù)，不取先前promise
getWares(1,3).then(?...?)
方案五 基于修飾器的方案四
和方案四是的解法一致的，但是是基于修飾器來做。代碼如下：
//?生成key值錯誤
const?generateKeyError?=?new?Error("Can't?generate?key?from?name?and?argument")
//?生成key值
function?generateKey(name,?argument)?{
????//?從arguments?中取得數(shù)據(jù)然后變?yōu)閿?shù)組
????const?params?=?Array.from(argument).join(',')
????try{
????????//?返回?字符串
????????return?`${name}:${params}`
????}catch(_)?{
????????return?generateKeyError
????}
}
function?decorate(handleDescription,?entryArgs)?{
????//?判斷?當(dāng)前?最后數(shù)據(jù)是否是descriptor，如果是descriptor,直接?使用
????//?例如?log?這樣的修飾器
????if?(isDescriptor(entryArgs[entryArgs.length?-?1]))?{
????????return?handleDescription(...entryArgs,?[])
????}?else?{
????????//?如果不是
????????//?例如?add(1)?plus(20)?這樣的修飾器
????????return?function()?{
????????????return?handleDescription(...Array.protptype.slice.call(arguments),?entryArgs)
????????}
????}
}
function?handleApiCache(target,?name,?descriptor,?...config)?{
????//?拿到函數(shù)體并保存
????const?fn?=?descriptor.value
????//?修改函數(shù)體
????descriptor.value?=?function?()?{?
????????const?key?=??generateKey(name,?arguments)
????????//?key無法生成，直接請求?服務(wù)端數(shù)據(jù)
????????if?(key?===?generateKeyError)??{
????????????//?利用剛才保存的函數(shù)體進(jìn)行請求
????????????return?fn.apply(null,?arguments)
????????}
????????let?promise?=?ExpriesCache.get(key)
????????if?(!promise)?{
????????????//?設(shè)定promise
????????????promise?=?fn.apply(null,?arguments).catch(error?=>?{
?????????????????//?在請求回來后，如果出現(xiàn)問題，把promise從cache中刪除
????????????????ExpriesCache.delete(key)
????????????????//?返回錯誤
????????????????return?Promise.reject(error)
????????????})
????????????//?使用?10s?緩存，10s之后再次get就會?獲取null?而從服務(wù)端繼續(xù)請求
????????????ExpriesCache.set(key,?promise,?config[0])
????????}
????????return?promise?
????}
????return?descriptor;
}
//?制定?修飾器
function?ApiCache(...args)?{
????return?decorate(handleApiCache,?args)
}
此時 我們就會使用 類來對api進(jìn)行緩存
class?Api?{
????//?緩存10s
????@ApiCache(10)
????//?此時不要使用默認(rèn)值，因?yàn)楫?dāng)前?修飾器?取不到
????getWare(params1,?params2)?{
????????return?request.get('/getWares')
????}
}
因?yàn)楹瘮?shù)存在函數(shù)提升，所以沒有辦法利用函數(shù)來做 修飾器 例如:
var?counter?=?0;
var?add?=?function?()?{
??counter++;
};
@add
function?foo()?{
}
該代碼意圖是執(zhí)行后counter等于 1，但是實(shí)際上結(jié)果是counter等于 0。因?yàn)楹瘮?shù)提升，使得實(shí)際執(zhí)行的代碼是下面這樣
@add
function?foo()?{
}
var?counter;
var?add;
counter?=?0;
add?=?function?()?{
??counter++;
};
所以沒有 辦法在函數(shù)上用修飾器。具體參考ECMAScript 6 入門 Decorator此方式寫法簡單且對業(yè)務(wù)層沒有太多影響。但是不可以動態(tài)修改 緩存時間
調(diào)用方式
getWares(1,2).then(?...?)
//?第二次調(diào)用?取得先前的promise
getWares(1,2).then(?...?)
//?不同的參數(shù)，不取先前promise
getWares(1,3).then(?...?)
總結(jié)
api 的緩存機(jī)制與場景在這里也基本上介紹了，基本上能夠完成絕大多數(shù)的數(shù)據(jù)業(yè)務(wù)緩存，在這里我也想請教教大家，有沒有什么更好的解決方案，或者這篇博客中有什么不對的地方，歡迎指正，在這里感謝各位了。
同時這里也有很多沒有做完的工作，可能會在后面的博客中繼續(xù)完善。
1. JavaScript 重溫系列（22篇全） 2. ECMAScript 重溫系列（10篇全） 3. JavaScript設(shè)計模式 重溫系列（9篇全） 4.?正則 / 框架 / 算法等 重溫系列（16篇全） 5.?Webpack4 入門（上）||?Webpack4 入門（下） 6.?MobX 入門（上）?||??MobX 入門（下） 7. 80+篇原創(chuàng)系列匯總 回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~
點(diǎn)擊“閱讀原文”查看 80+ 篇原創(chuàng)文章
