一品闺秀 紫伊281,色即是空4,u88.con
本文介绍了vue2 ssr 缓存 api 数据,分享给大家,具体如下:
1. 安装缓存依赖: lru-cache
npm install lru-cache --dev
2. api 配置文件
config-server.js
var lru = require('lru-cache') 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
import axios from 'axios' import qs from 'qs' import md5 from 'md5' import config from './config-server.js' 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 端和浏览器端分开封装
import config from './config-server.js'
const key = md5(url + json.stringify(data))
通过 url 和参数, 生成一个唯一的 key
if (config.cached && config.cached.has(key)) { return promise.resolve(config.cached.get(key)) }
if (config.cached && data.cache) config.cached.set(key, res)
判断下是不是开启了缓存, 并且接口指定缓存的话, 将 api 返回的数据, 写入缓存
注意:
这个 api 会处理所有的请求, 但是很多请求其实是不需要缓存的, 所以需要缓存可以在传过来的 data 里, 添加个 cache: true, 如:
api.post('/api/test', {a: 1, b:2, cache: true})
不需要缓存的直接按正常传值即可
当然这里标记是不是要缓存的方法有很多, 不一定要用这一种
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论