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ù)組來返回?cái)?shù)據(jù)，因?yàn)楸旧矶际菙?shù)組操作

        // 如果傳入的是字符串，則需要取出操作

        return queryIsArray ? res : res[0]

    })

}

該方案是同時獲取多個服務(wù)器數(shù)據(jù)的方式。可以同時獲得多個數(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，但是沒有超時，返回?cái)?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ù)完善。

文章轉(zhuǎn)自微信公眾號@前端技術(shù)精選

上一篇：

接口優(yōu)化的幾個技巧

下一篇：

從Flask到FastAPI的平滑遷移
#你可能也喜歡這些API文章!

我們有何不同？

API服務(wù)商零注冊

多API并行試用

數(shù)據(jù)驅(qū)動選型，提升決策效率

查看全部API→
??

熱門場景實(shí)測，選對API

#AI文本生成大模型API

對比大模型API的內(nèi)容創(chuàng)意新穎性、情感共鳴力、商業(yè)轉(zhuǎn)化潛力

25個渠道
一鍵對比試用API 限時免費(fèi)

#AI深度推理大模型API

對比大模型API的邏輯推理準(zhǔn)確性、分析深度、可視化建議合理性

10個渠道
一鍵對比試用API 限時免費(fèi)