详解Vue2 SSR 缓存 Api 数据

发布时间：2020-12-17 02:43:00 所属栏目：百科来源：网络整理

导读：本文介绍了Vue2 SSR 缓存 Api 数据，分享给大家，具体如下： 1. 安装缓存依赖: lru-cache 2. api 配置文件 config-server.js let api if (process. API ) { api = process. API } else { api = process. API = { api: 'http://localhost:8080/api/',cached:

本文介绍了Vue2 SSR 缓存 Api 数据，分享给大家，具体如下：

1. 安装缓存依赖: lru-cache

2. api 配置文件

config-server.js

let api
if (process.API) {
api = process.API
} else {
api = process.API = {
api: 'http://localhost:8080/api/',cached: LRU({
max: 1000,maxAge: 1000 60 15
}),cachedItem: {}
}
}

module.exports = api

配置下lru-cache

3. 封装下 api

export default {
post(url,data) {
const key = md5(url + JSON.stringify(data))
if (config.cached && config.cached.has(key)) {
return Promise.resolve(config.cached.get(key))
}
return axios({
method: 'post',url: config.api + url,data: qs.stringify(data),// 其他配置
}).then(res => {
if (config.cached && data.cache) config.cached.set(key,res)
return res
})
}
}

ajax 库我们用axios,因为axios在 nodejs 和浏览器都可以使用

并且将 node 端和浏览器端分开封装

通过 url 和参数,生成一个唯一的 key

判断下是不是开启了缓存,并且接口指定缓存的话,将 api 返回的数据,写入缓存

注意:

这个 api 会处理所有的请求,但是很多请求其实是不需要缓存的,所以需要缓存可以在传过来的 data 里,添加个 cache: true,如:

不需要缓存的直接按正常传值即可

当然这里标记是不是要缓存的方法有很多,不一定要用这一种

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!