详解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 相关文章推荐
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 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 mkdir()定义和用法
2009/01/14 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
php车辆违章查询数据示例
2016/10/14 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
js微信支付实现代码
2016/12/22 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
pandas删除指定行详解
2019/04/04 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
python如何实现递归转非递归
2021/02/25 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
一封普通求职者的求职信
2013/11/20 职场文书
服装促销活动方案
2014/02/23 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
应收账款管理制度
2015/08/06 职场文书
教师教育心得体会
2016/01/19 职场文书