详解Vue2 SSR 缓存 Api 数据


Posted in Javascript onNovember 20, 2017

本文介绍了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})

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
js prototype截取字符串函数
Apr 01 Javascript
js arguments对象应用介绍
Nov 28 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 #Javascript
jquery ztree实现右键收藏功能
Nov 20 #jQuery
深入理解vuex2.0 之 modules
Nov 20 #Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 #Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 #Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 #Javascript
详细分析jsonp的原理和实现方式
Nov 20 #Javascript
You might like
PHP Cookie的使用教程详解
2013/06/03 PHP
php Session存储到Redis的方法
2013/11/04 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
让焦点自动跳转
2006/07/01 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
React组件的三种写法总结
2017/01/12 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
python获取list下标及其值的简单方法
2016/09/12 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
Python全排列操作实例分析
2018/07/24 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
python中的数据结构比较
2019/05/13 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
EJB的角色和三个对象
2015/12/31 面试题
运动会入场解说词300字
2014/01/25 职场文书
化工专业求职信
2014/07/01 职场文书