|
在开发 web 应用程序时,性能都是必不可少的话题。对于webpack打包的单页面应用程序而言,我们可以采用很多方式来对性能进行优化,比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。甚至在vue-cli 项目中我们可以使用 --modern 指令生成新旧两份浏览器代码来对程序进行优化。; H7 B) Y1 ?9 l: V: J
而事实上,缓存一定是提升web应用程序有效方法之一,尤其是用户受限于网速的情况下。提升系统的响应能力,降低网络的消耗。当然,内容越接近于用户,则缓存的速度就会越快,缓存的有效性则会越高。
7 u% ]- Y: t/ ^' s7 q) g7 F( l 以客户端而言,我们有很多缓存数据与资源的方法,例如标准的浏览器缓存以及目前火热的 Service worker。但是,他们更适合静态内容的缓存。例如 html,js,css以及图片等文件。而缓存系统数据,则采用另外的方案。现在就对应用到项目中的各种 api 请求缓存方案,从简单到复杂依次介绍一下。
( G, ]( ~% q& q% r- ^方案一 数据缓存) e6 t3 I$ Z, n4 R+ S. v
简单的 数据 缓存,第一次请求时候获取数据,之后便使用数据,不再请求后端api。代码如下:4 T5 j6 h: h# A# C4 Y
- 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. e+ w! J5 Z5 B' A/ e9 R b5 b
之后 代码 使用 了 async 函数,可以将异步操作变得更为方便。你可以参考ECMAScript 6 入门 async函数来进行学习或者巩固知识。
; ^) s0 _4 ?) [ 代码本身很容易理解,是利用 Map 对象对数据进行缓存,之后调用从 Map 对象来取数据。对于及其简单的业务场景,直接利用此代码即可。 * |$ N) Y i: @( @0 r
调用方式:
S# H9 h1 \' L s' k. i5 Y3 R6 lgetWares().then( ... )/ i- f, P3 |! L: E! h) }
// 第二次调用 取得先前的data
- h3 C9 v8 e( v/ k3 n* A! t \getWares().then( ... ) 方案二 promise 缓存
9 J b6 _$ H7 _/ F' ?% {% J 方案一本身是不足的。因为如果考虑同时两个以上的调用此api,会因为请求未返回而进行第二次请求api。当然,如果你在系统中添加类似于vuex、redux这样的单一数据源框架,这样的问题不太会遇到,但是有时候我们想在各个复杂组件分别调用api,而不想对组件进行组件通信数据时候,便会遇到此场景。 * J4 u- Y" Z7 Q- ]% |8 r
- 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就一直出错的问题。 ( @9 `6 U6 L* b& o, z+ ]/ b
调用方式:
# s5 c1 s& o& `8 ygetWares().then( ... )# N; y$ M8 q3 o6 m2 @( i% J
// 第二次调用 取得先前的promise
4 l: F. \' E# Y i* c4 |" e# EgetWares().then( ... ) 方案三 多promise 缓存5 [. j+ \4 {7 n# X5 W/ X# N
该方案是同时需要 一个以上 的api请求的情况下,对数据同时返回,如果某一个api发生错误的情况下。均不返回正确数据。 ) x0 B5 s* B0 M& l( ^- f' M8 ?2 A
- 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]
- })
- }
该方案是同时获取多个服务器数据的方式。可以同时获得多个数据进行操作,不会因为单个数据出现问题而发生错误。
' h2 v: S5 O! c7 K4 r4 }调用方式: : Z0 D# F! S# a" D% m, N8 K
queryAll('wares').then( ... )' G3 f. E9 b, N5 k2 h
// 第二次调用 不会去取 wares,只会去skus
, b# D( Q% p- bqueryAll(['wares', 'skus']).then( ... ) 方案四 添加时间有关的缓存6 Q& N& l' ~, \: t) F
往往缓存是有危害的,如果我们在知道修改了数据的情况下,直接把 cache 删除即可,此时我们调用方法就可以向服务器进行请求。这样我们规避了前端显示旧的的数据。但是我们可能一段时间没有对数据进行操作,那么此时旧的数据就一直存在,那么我们最好规定个时间来去除数据。该方案是采用了 类 持久化数据来做数据缓存,同时添加了过期时长数据以及参数化。代码如下: & c; G7 |1 m8 Z' U# ?$ D
首先定义持久化类,该类可以存储 promise 或者 data
' x% v2 [- X1 V5 P" b8 r& B- class ItemCache() {
- construct(data, timeout) {
- this.data = data
- // 设定超时时间,设定为多少秒
- this.timeout = timeout
- // 创建对象时候的时间,大约设定为数据获得的时间
- this.cacheTime = (new Date()).getTime
- }
- }
然后我们定义该数据缓存。我们采用Map 基本相同的api * q- k! T% B: ]1 L1 g% v- q
- 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层这样定义 % M" d# ?# V) h6 f+ R
- // 生成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 参数不同而进行 缓存的方式。已经可以满足绝大部分的业务场景。
. K3 M3 G3 @6 h9 G调用方式:
. X; l! S1 E8 Q! w+ ^2 B* sgetWares(1,2).then( ... )3 y* ?' O O G0 c+ {5 _
// 第二次调用 取得先前的promise
0 D+ c) R2 `2 c; w" YgetWares(1,2).then( ... )5 J- T; y% ], f# Y- e+ e
// 不同的参数,不取先前promise6 r6 `9 ^* V6 w4 D f' ^: M
getWares(1,3).then( ... ) 方案五 基于修饰器的方案四
U9 r( C, x/ {3 { 和方案四是的解法一致的,但是是基于修饰器来做。代码如下: . m7 n" q4 T# D$ j+ F
- // 生成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进行缓存 * b! ^ C9 L' F+ ^) N
- class Api {
- // 缓存10s
- @ApiCache(10)
- // 此时不要使用默认值,因为当前 修饰器 取不到
- getWare(params1, params2) {
- return request.get('/getWares')
- }
- }
因为函数存在函数提升,所以没有办法利用函数来做修饰器,例如:
# W }+ w+ g7 n- @add
- function foo() {
- }
-
- var counter;
- var add;
-
- counter = 0;
-
- add = function () {
- counter++;
- };
所以没有 办法在函数上用修饰器。具体参考ECMAScript 6 入门 Decorator此方式写法简单且对业务层没有太多影响,但是不可以动态修改缓存时间。
+ E: Y; Y4 p5 ^) T1 f, U/ d; @调用方式: , N+ z# X/ y4 j
getWares(1,2).then( ... )" o* p& [# S7 V' ?& W
// 第二次调用 取得先前的promise6 t1 Q; P( \2 Q+ J* B
getWares(1,2).then( ... )
% w0 G6 l. w5 F& p& t/ l// 不同的参数,不取先前promise
* i# S. |- d. y. J {! n3 _getWares(1,3).then( ... ) |
|