详解Vue2 SSR 缓存 Api 数据

详解Vue2 SSR 缓存 Api 数据

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

1. 安装缓存依赖: l

http://

ru-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})

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。