本篇文章主要介紹了Vue2 SSR 快取 Api 數據,內容挺不錯的,現在分享給大家,也給大家做個參考。
本文介紹了Vue2 SSR 快取Api 數據,分享給大家,如下:
1. 安裝快取依賴: lru-cache
##
npm install lru-cache --dev
#
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
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 }) } }
#並且將node 端和瀏覽器端分開封裝
import config from './config-server.js'
#const key = md5(url + JSON.stringify(data))
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})
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! 相關推薦:
######實作簡單的vue無限載入指令的方法###############vue在腳手架中設定Sass的方法# ###########################以上是關於Vue2 SSR快取 Api 資料的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!