Vue SSR服務端渲染之資料快取
阿新 • • 發佈:2018-11-07
當我們在做vue的伺服器端渲染時,可能會碰到各種各樣的坑,記憶體洩露就是其中的一種。當然,導致記憶體洩露的原因有很多,不合理使用Axios也是其中一種,那下面我給大家介紹一下如何有效的避免請求中的記憶體洩露。
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:8181/api/', //配置快取 cached: LRU({ max: 1000, maxAge: 1000 * 60 * 15 }), cachedItem: {} } } module.exports = api
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})
不需要快取的直接按正常傳值即可