详解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 相关文章推荐
js获取提交的字符串的字节数
Feb 09 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 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/10/09 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
餐饮管理自我介绍信
2014/01/15 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
六一儿童节标语
2014/10/08 职场文书
财务务虚会发言材料
2014/10/20 职场文书
家长给老师的感谢信
2015/01/20 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
2015年教研员工作总结
2015/05/26 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python