本文介绍了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: {}
}
}
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
})
}
}
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,如:
不需要缓存的直接按正常传值即可
原文链接：https://www.f2er.com/vue/35129.html