[[351110]]

 在開發(fā) web 應(yīng)用程序時(shí)，性能都是必不可少的話題。對(duì)于webpack打包的單頁面應(yīng)用程序而言，我們可以采用很多方式來對(duì)性能進(jìn)行優(yōu)化，比方說 tree-shaking、模塊懶加載、利用 extrens 網(wǎng)絡(luò)cdn 加速這些常規(guī)的優(yōu)化。

甚至在vue-cli 項(xiàng)目中我們可以使用 --modern 指令生成新舊兩份瀏覽器代碼來對(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。 

代碼如下： 

const dataCache = new Map()  
async getWares() {  
    let key = 'wares'  
    // 從data 緩存中獲取 數(shù)據(jù)  
    let data = dataCache.get(key)  
    if (!data) {  
        // 沒有數(shù)據(jù)請(qǐng)求服務(wù)器  
        const res = await request.get('/getWares')  
        // 其他操作  
        ...  
        data = ...  
        // 設(shè)置數(shù)據(jù)緩存  
        dataCache.set(key, data)  
    }  
    return data  
} 

第一行代碼 使用了 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ù)來進(jìn)行學(xué)習(xí)或者鞏固知識(shí)。

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

調(diào)用方式： 

getWares().then( ... )  
// 第二次調(diào)用 取得先前的data  
getWares().then( ... ) 

方案二、 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ù)源框架，這樣的問題不太會(huì)遇到，但是有時(shí)候我們想在各個(gè)復(fù)雜組件分別調(diào)用api，而不想對(duì)組件進(jìn)行組件通信數(shù)據(jù)時(shí)候，便會(huì)遇到此場(chǎng)景。 

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 => {  
            // 對(duì)res 進(jìn)行操作  
            ...  
        }).catch(error => {  
            // 在請(qǐng)求回來后，如果出現(xiàn)問題，把promise從cache中刪除 以避免第二次請(qǐng)求繼續(xù)出錯(cuò)S  
            promiseCache.delete(key)  
            return Promise.reject(error)  
        })  
    }  
    // 返回promise  
    return promise  
} 

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

調(diào)用方式: 

getWares().then( ... )  
// 第二次調(diào)用 取得先前的promise  
getWares().then( ... ) 

方案三、 多promise 緩存

該方案是同時(shí)需要 一個(gè)以上 的api請(qǐng)求的情況下，對(duì)數(shù)據(jù)同時(shí)返回，如果某一個(gè)api發(fā)生錯(cuò)誤的情況下。

均不返回正確數(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]  
    // 獲取所有的 請(qǐng)求服務(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 => {  
                // 對(duì)res 進(jìn)行操作  
                ...  
                }).catch(error => {  
                // 在請(qǐng)求回來后，如果出現(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ù)組來返回?cái)?shù)據(jù)，因?yàn)楸旧矶际菙?shù)組操作  
        // 如果傳入的是字符串，則需要取出操作  
        return queryIsArray ? res : res[0]  
    })  
} 

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

調(diào)用方式： 

queryAll('wares').then( ... )  
// 第二次調(diào)用 不會(huì)去取 wares，只會(huì)去skus  
queryAll(['wares', 'skus']).then( ... ) 

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

往往緩存是有危害的，如果我們?cè)谥佬薷牧藬?shù)據(jù)的情況下，直接把 cache 刪除即可，此時(shí)我們調(diào)用方法就可以向服務(wù)器進(jìn)行請(qǐng)求。

這樣我們規(guī)避了前端顯示舊的的數(shù)據(jù)。但是我們可能一段時(shí)間沒有對(duì)數(shù)據(jù)進(jìn)行操作，那么此時(shí)舊的數(shù)據(jù)就一直存在，那么我們最好規(guī)定個(gè)時(shí)間來去除數(shù)據(jù)。

該方案是采用了 類 持久化數(shù)據(jù)來做數(shù)據(jù)緩存，同時(shí)添加了過期時(shí)長(zhǎng)數(shù)據(jù)以及參數(shù)化。 

代碼如下： 

首先定義持久化類,該類可以存儲(chǔ) promise 或者 data 

class ItemCache() {  
    construct(data, timeout) {  
        this.data = data  
        // 設(shè)定超時(shí)時(shí)間，設(shè)定為多少秒  
        this.timeout = timeout  
        // 創(chuàng)建對(duì)象時(shí)候的時(shí)間，大約設(shè)定為數(shù)據(jù)獲得的時(shí)間  
        this.cacheTime = (new Date()).getTime  
    }  
} 

然后我們定義該數(shù)據(jù)緩存。我們采用Map 基本相同的api 

class ExpriesCache {  
    // 定義靜態(tài)數(shù)據(jù)map來作為緩存池  
    static cacheMap =  new Map()  
    // 數(shù)據(jù)是否超時(shí)  
    static isOverTime(name) {  
        const data = ExpriesCache.cacheMap.get(name)  
        // 沒有數(shù)據(jù) 一定超時(shí)  
        if (!data) return true  
        // 獲取系統(tǒng)當(dāng)前時(shí)間戳  
        const currentTime = (new Date()).getTime()    
          // 獲取當(dāng)前時(shí)間與存儲(chǔ)時(shí)間的過去的秒數(shù)  
        const overTime = (currentTime - data.cacheTime) / 1000  
        // 如果過去的秒數(shù)大于當(dāng)前的超時(shí)時(shí)間，也返回null讓其去服務(wù)端取數(shù)據(jù)  
        if (Math.abs(overTime) > data.timeout) {  
            // 此代碼可以沒有，不會(huì)出現(xiàn)問題，但是如果有此代碼，再次進(jìn)入該方法就可以減少判斷。  
            ExpriesCache.cacheMap.delete(name)  
            return true  
        }  
        // 不超時(shí)  
        return false 
    }  
    // 當(dāng)前data在 cache 中是否超時(shí)  
    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ù)超時(shí)，返回null，但是沒有超時(shí)，返回?cái)?shù)據(jù)，而不是 ItemCache 對(duì)象  
        return isDataOverTiem ? null : ExpriesCache.cacheMap.get(name).data  
    }  
    // 默認(rèn)存儲(chǔ)20分鐘  
    static set(name, data, timeout = 1200) {  
        // 設(shè)置 itemCache  
        const itemCache = mew ItemCache(data, timeout)  
        //緩存  
        ExpriesCache.cacheMap.set(name, itemCache)  
    }  
} 

此時(shí)數(shù)據(jù)類以及操作類 都已經(jīng)定義好,我們可以在api層這樣定義 

// 生成key值錯(cuò)誤  
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錯(cuò)誤  
        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就會(huì) 獲取null 而從服務(wù)端繼續(xù)請(qǐng)求  
        ExpriesCache.set(key, res, 10)  
    }  
    return data  
} 

該方案使用了 過期時(shí)間 和 api 參數(shù)不同而進(jìn)行 緩存的方式。已經(jīng)可以滿足絕大部分的業(yè)務(wù)場(chǎng)景。

調(diào)用方式： 

getWares(1,2).then( ... )  
// 第二次調(diào)用 取得先前的promise  
getWares(1,2).then( ... )  
// 不同的參數(shù)，不取先前promise  
getWares(1,3).then( ... ) 

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

和方案四是的解法一致的，但是是基于修飾器來做。

代碼如下： 

// 生成key值錯(cuò)誤  
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無法生成，直接請(qǐng)求 服務(wù)端數(shù)據(jù)  
        if (key === generateKeyError)  {  
            // 利用剛才保存的函數(shù)體進(jìn)行請(qǐng)求  
            return fn.apply(null, arguments)  
        }  
        let promise = ExpriesCache.get(key)  
        if (!promise) {  
            // 設(shè)定promise  
            promise = fn.apply(null, arguments).catch(error => {  
                 // 在請(qǐng)求回來后，如果出現(xiàn)問題，把promise從cache中刪除  
                ExpriesCache.delete(key)  
                // 返回錯(cuò)誤  
                return Promise.reject(error)  
            })  
            // 使用 10s 緩存，10s之后再次get就會(huì) 獲取null 而從服務(wù)端繼續(xù)請(qǐng)求  
            ExpriesCache.set(key, promise, config[0])  
        }  
        return promise   
    }  
    return descriptor;  
} 
// 制定 修飾器  
function ApiCache(...args) {  
    return decorate(handleApiCache, args)  
} 

此時(shí) 我們就會(huì)使用 類來對(duì)api進(jìn)行緩存 

class Api {  
    // 緩存10s  
    @ApiCache(10)  
    // 此時(shí)不要使用默認(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

此方式寫法簡(jiǎn)單且對(duì)業(yè)務(wù)層沒有太多影響。但是不可以動(dòng)態(tài)修改 緩存時(shí)間

調(diào)用方式 

getWares(1,2).then( ... )  
// 第二次調(diào)用 取得先前的promise  
getWares(1,2).then( ... )  
// 不同的參數(shù)，不取先前promise  
getWares(1,3).then( ... ) 

總結(jié)

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

同時(shí)這里也有很多沒有做完的工作，可能會(huì)在后面的博客中繼續(xù)完善。