详解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 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
javascript的push使用指南
Dec 05 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
python如何通过protobuf实现rpc
2016/03/06 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
企业精神口号
2014/06/11 职场文书
2014年宣传工作总结
2014/11/18 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
好员工观后感
2015/06/17 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL