QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 2976|回复: 0

[HTML/CSS/JS] 前端API请求缓存数据的5种方案

[复制链接]

等级头衔

积分成就    金币 : 2861
   泡泡 : 1516
   精华 : 6
   在线时间 : 1321 小时
   最后登录 : 2025-7-9

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2020-11-30 08:49:23 | 显示全部楼层 |阅读模式
       在开发 web 应用程序时,性能都是必不可少的话题。对于webpack打包的单页面应用程序而言,我们可以采用很多方式来对性能进行优化,比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。甚至在vue-cli 项目中我们可以使用 --modern 指令生成新旧两份浏览器代码来对程序进行优化。
  @5 N, c$ W3 I+ s( H* q" N       而事实上,缓存一定是提升web应用程序有效方法之一,尤其是用户受限于网速的情况下。提升系统的响应能力,降低网络的消耗。当然,内容越接近于用户,则缓存的速度就会越快,缓存的有效性则会越高。; K& ]0 s" n( m" N9 j: l' g
       以客户端而言,我们有很多缓存数据与资源的方法,例如标准的浏览器缓存以及目前火热的 Service worker。但是,他们更适合静态内容的缓存。例如 html,js,css以及图片等文件。而缓存系统数据,则采用另外的方案。现在就对应用到项目中的各种 api 请求缓存方案,从简单到复杂依次介绍一下。: s' c$ h- ?  u7 V
方案一 数据缓存! Z  _+ e0 V  A' x$ R; f1 u
       简单的 数据 缓存,第一次请求时候获取数据,之后便使用数据,不再请求后端api。代码如下:% O4 F# o0 m% M$ `
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的介绍,此处可以理解为一个键值对存储结构。
! w  i1 P* F  T# }' ~       之后 代码 使用 了 async 函数,可以将异步操作变得更为方便。你可以参考ECMAScript 6 入门 async函数来进行学习或者巩固知识。
. N) r3 W; Y+ D3 Y3 k       代码本身很容易理解,是利用 Map 对象对数据进行缓存,之后调用从 Map 对象来取数据。对于及其简单的业务场景,直接利用此代码即可。' N; b; j* N. B% c  H
调用方式:
0 E8 u" A3 M9 t7 [
getWares().then( ... )& F7 g' G' z0 b; ]5 k/ R( S
// 第二次调用 取得先前的data
+ Z! e, O& ]5 z2 F: L8 DgetWares().then( ... )
方案二 promise 缓存& b4 C$ d% L( O! X( P: G% e
       方案一本身是不足的。因为如果考虑同时两个以上的调用此api,会因为请求未返回而进行第二次请求api。当然,如果你在系统中添加类似于vuex、redux这样的单一数据源框架,这样的问题不太会遇到,但是有时候我们想在各个复杂组件分别调用api,而不想对组件进行组件通信数据时候,便会遇到此场景。2 j1 D0 X& r# t1 z8 j: G
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就一直出错的问题。2 T% o& U1 o, x& J
调用方式:
7 v2 P( p% {( S2 r& D4 M% k9 p5 q; m
getWares().then( ... )
. r5 f! q* r6 _0 X, X4 q9 g// 第二次调用 取得先前的promise% r" L0 O9 P1 X: p, i
getWares().then( ... )
方案三 多promise 缓存
1 w: @- t4 f" b5 ?       该方案是同时需要 一个以上 的api请求的情况下,对数据同时返回,如果某一个api发生错误的情况下。均不返回正确数据。: ]3 o# O: l8 W  n4 h) y6 L
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]
    })
}
      该方案是同时获取多个服务器数据的方式。可以同时获得多个数据进行操作,不会因为单个数据出现问题而发生错误。
2 A$ U# L$ u+ H调用方式:; T# a# E$ k2 E2 t0 U3 ?- X( n
queryAll('wares').then( ... )7 [- R% m( s8 o1 \1 V4 t) F  u" J1 @
// 第二次调用 不会去取 wares,只会去skus
0 f+ b9 J3 R2 \7 M& B9 oqueryAll(['wares', 'skus']).then( ... )
方案四 添加时间有关的缓存! y7 R$ t9 q1 Z3 Y
       往往缓存是有危害的,如果我们在知道修改了数据的情况下,直接把 cache 删除即可,此时我们调用方法就可以向服务器进行请求。这样我们规避了前端显示旧的的数据。但是我们可能一段时间没有对数据进行操作,那么此时旧的数据就一直存在,那么我们最好规定个时间来去除数据。该方案是采用了 类 持久化数据来做数据缓存,同时添加了过期时长数据以及参数化。代码如下:
. @$ E: C: Q5 @) p% j首先定义持久化类,该类可以存储 promise 或者 data+ @0 y1 v& Y* S; V. a5 k9 e( y& \
class ItemCache() {
    construct(data, timeout) {
        this.data = data
        // 设定超时时间,设定为多少秒
        this.timeout = timeout
        // 创建对象时候的时间,大约设定为数据获得的时间
        this.cacheTime = (new Date()).getTime
    }
}
然后我们定义该数据缓存。我们采用Map 基本相同的api
; Q8 v( z; |' N# j
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层这样定义
! x4 y6 |  q1 D7 S3 V  T% N
// 生成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 参数不同而进行 缓存的方式。已经可以满足绝大部分的业务场景。& j- [# F# b, `9 J
调用方式:
4 _0 |3 D' @4 ~2 O0 z0 d: Z
getWares(1,2).then( ... )5 D$ J* f# ^6 `% m& U
// 第二次调用 取得先前的promise
2 f( B9 ?% [( x: `- U) UgetWares(1,2).then( ... )" O2 t# ~7 ]) h8 I7 t& y
// 不同的参数,不取先前promise
) ^& d0 N" P- V) S- g# V6 @3 M& WgetWares(1,3).then( ... )
方案五 基于修饰器的方案四% c1 J6 ^: \* P2 S' I+ B1 W- X+ |
       和方案四是的解法一致的,但是是基于修饰器来做。代码如下:
3 Z- F9 V7 M: t/ G8 b6 D4 o
// 生成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进行缓存
+ Y; S, ~) _8 S  s
class Api {
    // 缓存10s
    @ApiCache(10)
    // 此时不要使用默认值,因为当前 修饰器 取不到
    getWare(params1, params2) {
        return request.get('/getWares')
    }
}
因为函数存在函数提升,所以没有办法利用函数来做修饰器,例如:9 V# k/ S+ @! H. v( B7 G  I
@add
function foo() {
}

var counter;
var add;

counter = 0;

add = function () {
  counter++;
};
      所以没有 办法在函数上用修饰器。具体参考ECMAScript 6 入门 Decorator此方式写法简单且对业务层没有太多影响,但是不可以动态修改缓存时间。
; d( \5 h) ?: F% T调用方式:
$ m: ]9 v) Q) U. q& w* w' q# g
getWares(1,2).then( ... )6 D# N9 N+ ?1 g4 h8 ?. Y' t
// 第二次调用 取得先前的promise
; K/ J# q0 I% l8 J* T% _# q; k3 ^getWares(1,2).then( ... )
3 s; }& T9 m& u' h3 ]7 N' y// 不同的参数,不取先前promise
! X: s! W2 l# A+ _2 A7 ]7 t. Q. sgetWares(1,3).then( ... )
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2025-9-13 17:26

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表