详解Vue2 SSR 缓存 Api 数据
本文介绍了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})
不需要缓存的直接按正常传值即可
当然这里标记是不是要缓存的方法有很多, 不一定要用这一种
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
vue2实现directive自定义指令的封装与全局注册流程
自定义指令是对普通DOM元素进行的底层操作,它是一种有效的的补充和扩展,不仅可以用于定义任何的dom操作,并且是可以复用的,下面这篇文章主要给大家介绍了关于vue2实现directive自定义指令的封装与全局注册流程的相关资料,需要的朋友可以参考下2023-02-02vue中的addEventListener和removeEventListener用法说明
这篇文章主要介绍了vue中的addEventListener和removeEventListener用法说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-06-06
最新评论