详解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 EasyUI API 中文文档 搜索框
Sep 29 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
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
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
python实现简单登陆系统
2018/10/18 Python
Python文件读写常见用法总结
2019/02/22 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
python多线程分块读取文件
2019/08/29 Python
python中open函数的基本用法示例
2019/09/07 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
迎元旦广播稿
2014/02/22 职场文书
励志演讲稿800字
2014/08/21 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
女儿满月酒致辞
2015/07/29 职场文书
创业计划书详解
2019/07/19 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
python使用pygame创建精灵Sprite
2021/04/06 Python
浅谈Redis的几个过期策略
2021/05/27 Redis