做者：wsafight，原文：https://github.com/wsafight/personBlog/issues/2css
在開發 web 應用程序時，性能都是必不可少的話題。
html
對於webpack打包的單頁面應用程序而言，咱們能夠採用不少方式來對性能進行優化，比方說 tree-shaking、模塊懶加載、利用 extrens 網絡cdn 加速這些常規的優化。前端
甚至在vue-cli 項目中咱們可使用 --modern 指令生成新舊兩份瀏覽器代碼來對程序進行優化。vue
而事實上，緩存必定是提高web應用程序有效方法之一，尤爲是用戶受限於網速的狀況下。提高系統的響應能力，下降網絡的消耗。固然，內容越接近於用戶，則緩存的速度就會越快，緩存的有效性則會越高。webpack
以客戶端而言，咱們有不少緩存數據與資源的方法，例如 標準的瀏覽器緩存 以及 目前火熱的 Service worker。可是，他們更適合靜態內容的緩存。例如 html，js，css以及圖片等文件。而緩存系統數據，我採用另外的方案。git
那我如今就對我應用到項目中的各類 api 請求緩存方案，從簡單到複雜依次介紹一下。es6
方案一 數據緩存
簡單的 數據 緩存，第一次請求時候獲取數據，以後便使用數據，再也不請求後端api。代碼以下：github
const dataCache = new Map()
async getWares() {
let key = 'wares'
// 從data 緩存中獲取 數據
let data = dataCache.get(key)
if (!data) {
// 沒有數據請求服務器
const res = await request.get('/getWares')
// 其餘操做
...
data = ...
// 設置數據緩存
dataCache.set(key, data)
}
return data
}
第一行代碼 使用了 es6以上的 Map，若是對map不是很理解的狀況下，你能夠參考ECMAScript 6 入門 Set 和 Map 或者 Exploring ES6 關於 map 和 set的介紹，此處能夠理解爲一個鍵值對存儲結構。web
以後 代碼 使用 了 async 函數，能夠將異步操做變得更爲方便。你能夠參考ECMAScript 6 入門 async函數來進行學習或者鞏固知識。算法
代碼自己很容易理解，是利用 Map 對象對數據進行緩存，以後調用從 Map 對象來取數據。對於及其簡單的業務場景，直接利用此代碼便可。
調用方式：
getWares().then( ... )
// 第二次調用 取得先前的data
getWares().then( ... )
方案二 promise 緩存
方案一自己是不足的。由於若是考慮同時兩個以上的調用此 api，會由於請求未返回而進行第二次請求api。固然，若是你在系統中添加相似於 vuex、redux這樣的單一數據源框架，這樣的問題不太會遇到，可是有時候咱們想在各個複雜組件分別調用api，而不想對組件進行組件通訊數據時候，便會遇到此場景。
const promiseCache = new Map()
getWares() {
const key = 'wares'
let promise = promiseCache.get(key);
// 當前promise緩存中沒有 該promise
if (!promise) {
promise = request.get('/getWares').then(res => {
// 對res 進行操做
...
}).catch(error => {
// 在請求回來後，若是出現問題，把promise從cache中刪除 以免第二次請求繼續出錯S
promiseCache.delete(key)
return Promise.reject(error)
})
}
// 返回promise
return promise
}
該代碼避免了方案一的同一時間屢次請求的問題。同時也在後端出錯的狀況下對promise進行了刪除，不會出現緩存了錯誤的promise就一直出錯的問題。
調用方式:
getWares().then( ... )
// 第二次調用 取得先前的promise
getWares().then( ... )
方案三 多promise 緩存
該方案是同時須要 一個以上 的api請求的狀況下，對數據同時返回，若是某一個api發生錯誤的狀況下。均不返回正確數據。
const querys ={
wares: 'getWares',
skus: 'getSku'
}
const promiseCache = new Map()
async queryAll(queryApiName) {
// 判斷傳入的數據是不是數組
const queryIsArray = Array.isArray(queryApiName)
// 統一化處理數據，不管是字符串仍是數組均視爲數組
const apis = queryIsArray ? queryApiName : [queryApiName]
// 獲取全部的 請求服務
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 進行操做
...
}).catch(error => {
// 在請求回來後，若是出現問題，把promise從cache中刪除
promiseCache.delete(api)
return Promise.reject(error)
})
promiseCache.set(api, promise)
promiseCache.push(promise)
}
})
return Promise.all(promiseApi).then(res => {
// 根據傳入的 是字符串仍是數組來返回數據，由於自己都是數組操做
// 若是傳入的是字符串，則須要取出操做
return queryIsArray ? res : res[0]
})
}
該方案是同時獲取多個服務器數據的方式。能夠同時得到多個數據進行操做，不會由於單個數據出現問題而發生錯誤。
調用方式
queryAll('wares').then( ... )
// 第二次調用 不會去取 wares，只會去skus
queryAll(['wares', 'skus']).then( ... )
方案四 添加時間有關的緩存
每每緩存是有危害的，若是咱們在知道修改了數據的狀況下，直接把 cache 刪除便可，此時咱們調用方法就能夠向服務器進行請求。這樣咱們規避了前端顯示舊的的數據。可是咱們可能一段時間沒有對數據進行操做，那麼此時舊的數據就一直存在，那麼咱們最好規定個時間來去除數據。該方案是採用了 類 持久化數據來作數據緩存，同時添加了過時時長數據以及參數化。代碼以下：首先定義持久化類,該類能夠存儲 promise 或者 data
class ItemCache() {
construct(data, timeout) {
this.data = data
// 設定超時時間，設定爲多少秒
this.timeout = timeout
// 建立對象時候的時間，大約設定爲數據得到的時間
this.cacheTime = (new Date()).getTime
}
}
而後咱們定義該數據緩存。咱們採用Map 基本相同的api
class ExpriesCache {
// 定義靜態數據map來做爲緩存池
static cacheMap = new Map()
// 數據是否超時
static isOverTime(name) {
const data = ExpriesCache.cacheMap.get(name)
// 沒有數據 必定超時
if (!data) return true
// 獲取系統當前時間戳
const currentTime = (new Date()).getTime()
// 獲取當前時間與存儲時間的過去的秒數
const overTime = (currentTime - data.cacheTime) / 1000
// 若是過去的秒數大於當前的超時時間，也返回null讓其去服務端取數據
if (Math.abs(overTime) > data.timeout) {
// 此代碼能夠沒有，不會出現問題，可是若是有此代碼，再次進入該方法就能夠減小判斷。
ExpriesCache.cacheMap.delete(name)
return true
}
// 不超時
return false
}
// 當前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)
//若是 數據超時，返回null，可是沒有超時，返回數據，而不是 ItemCache 對象
return isDataOverTiem ? null : ExpriesCache.cacheMap.get(name).data
}
// 默認存儲20分鐘
static set(name, data, timeout = 1200) {
// 設置 itemCache
const itemCache = mew ItemCache(data, timeout)
//緩存
ExpriesCache.cacheMap.set(name, itemCache)
}
}
此時數據類以及操做類 都已經定義好,咱們能夠在api層這樣定義
// 生成key值錯誤
const generateKeyError = new Error("Can't generate key from name and argument")
// 生成key值
function generateKey(name, argument) {
// 從arguments 中取得數據而後變爲數組
const params = Array.from(argument).join(',')
try{
// 返回 字符串，函數名 + 函數參數
return `${name}:${params}`
}catch(_) {
// 返回生成key錯誤
return generateKeyError
}
}
async getWare(params1, params2) {
// 生成key
const key = generateKey('getWare', [params1, params2])
// 得到數據
let data = ExpriesCache.get(key)
if (!data) {
const res = await request('/getWares', {params1, params2})
// 使用 10s 緩存，10s以後再次get就會 獲取null 而從服務端繼續請求
ExpriesCache.set(key, res, 10)
}
return data
}
該方案使用了 過時時間 和 api 參數不一樣而進行 緩存的方式。已經能夠知足絕大部分的業務場景。
調用方式
getWares(1,2).then( ... )
// 第二次調用 取得先前的promise
getWares(1,2).then( ... )
// 不一樣的參數，不取先前promise
getWares(1,3).then( ... )
方案五 基於修飾器的方案四
和方案四是的解法一致的，可是是基於修飾器來作。代碼以下：
// 生成key值錯誤
const generateKeyError = new Error("Can't generate key from name and argument")
// 生成key值
function generateKey(name, argument) {
// 從arguments 中取得數據而後變爲數組
const params = Array.from(argument).join(',')
try{
// 返回 字符串
return `${name}:${params}`
}catch(_) {
return generateKeyError
}
}
function decorate(handleDescription, entryArgs) {
// 判斷 當前 最後數據是不是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) {
// 拿到函數體並保存
const fn = descriptor.value
// 修改函數體
descriptor.value = function () {
const key = generateKey(name, arguments)
// key沒法生成，直接請求 服務端數據
if (key === generateKeyError) {
// 利用剛纔保存的函數體進行請求
return fn.apply(null, arguments)
}
let promise = ExpriesCache.get(key)
if (!promise) {
// 設定promise
promise = fn.apply(null, arguments).catch(error => {
// 在請求回來後，若是出現問題，把promise從cache中刪除
ExpriesCache.delete(key)
// 返回錯誤
return Promise.reject(error)
})
// 使用 10s 緩存，10s以後再次get就會 獲取null 而從服務端繼續請求
ExpriesCache.set(key, promise, config[0])
}
return promise
}
return descriptor;
}
// 制定 修飾器
function ApiCache(...args) {
return decorate(handleApiCache, args)
}
此時 咱們就會使用 類來對api進行緩存
class Api {
// 緩存10s
@ApiCache(10)
// 此時不要使用默認值，由於當前 修飾器 取不到
getWare(params1, params2) {
return request.get('/getWares')
}
}
由於函數存在函數提高，因此沒有辦法利用函數來作 修飾器 例如:
var counter = 0;
var add = function () {
counter++;
};
@add
function foo() {
}
該代碼意圖是執行後counter等於 1，可是實際上結果是counter等於 0。由於函數提高，使得實際執行的代碼是下面這樣
@add
function foo() {
}
var counter;
var add;
counter = 0;
add = function () {
counter++;
};
因此沒有 辦法在函數上用修飾器。具體參考ECMAScript 6 入門 Decorator此方式寫法簡單且對業務層沒有太多影響。可是不能夠動態修改 緩存時間
調用方式
getWares(1,2).then( ... )
// 第二次調用 取得先前的promise
getWares(1,2).then( ... )
// 不一樣的參數，不取先前promise
getWares(1,3).then( ... )
總結
api 的緩存機制與場景在這裏也基本上介紹了，基本上可以完成絕大多數的數據業務緩存，在這裏我也想請教教你們，有沒有什麼更好的解決方案，或者這篇博客中有什麼不對的地方，歡迎指正，在這裏感謝各位了。
同時這裏也有不少沒有作完的工做，可能會在後面的博客中繼續完善。
1. JavaScript 重溫系列（22篇全）
2. ECMAScript 重溫系列（10篇全）
3. JavaScript設計模式 重溫系列（9篇全）
4.
正則 / 框架 / 算法等 重溫系列（16篇全）
5.
Webpack4 入門（上）
||
Webpack4 入門（下）
6.
MobX 入門（上）
||
MobX 入門（下）
7. 8
0+篇原創系列彙總
回覆「加羣」與大佬們一塊兒交流學習~
點擊「閱讀原文」查看 80+ 篇原創文章
本文分享自微信公衆號 - 前端自習課（FE-study）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。