前端 API 请求缓存的5个方案，开发前端基础

} 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