前端 api 请求缓存方案

在开发 web 应用程序时，性能都是必不可少的话题。对于webpack打包的单页面应用程序而言，咱们能够采用不少方式来对性能进行优化，比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。甚至在vue-cli 项目中咱们可使用 --modern 指令生成新旧两份浏览器代码来对程序进行优化。

而事实上，缓存必定是提高web应用程序有效方法之一，尤为是用户受限于网速的状况下。提高系统的响应能力，下降网络的消耗。固然，内容越接近于用户，则缓存的速度就会越快，缓存的有效性则会越高。

以客户端而言，咱们有不少缓存数据与资源的方法，例如 标准的浏览器缓存 以及 目前火热的 Service worker。可是，他们更适合静态内容的缓存。例如 html，js，css以及图片等文件。而缓存系统数据，我采用另外的方案。

那我如今就对我应用到项目中的各类 api 请求方案，从简单到复杂依次介绍一下。

方案一 数据缓存

简单的 数据 缓存，第一次请求时候获取数据，以后便使用数据，再也不请求后端api。
代码以下：

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的介绍，此处能够理解为一个键值对存储结构。

以后 代码 使用 了 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)
        })
        promiseCache.set(api, promise)
    }
    // 返回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的缓存机制与场景在这里也基本上介绍了，基本上可以完成绝大多数的数据业务缓存，在这里我也想请教教你们，有没有什么更好的解决方案，或者这篇博客中有什么不对的地方，欢迎指正，在这里感谢各位了。 同时这里也有不少没有作完的工做，可能会在后面的博客中继续完善。