详解Vue2 SSR 缓存 Api 数据

 更新时间:2017年11月20日 12:03:01   作者:M.M.F  
本篇文章主要介绍了Vue2 SSR 缓存 Api 数据,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

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

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

相关文章

  • vue2.x element-ui实现pc端购物车页面demo

    vue2.x element-ui实现pc端购物车页面demo

    这篇文章主要为大家介绍了vue2.x element-ui实现pc端购物车页面demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • VUE中的自定义指令钩子函数讲解

    VUE中的自定义指令钩子函数讲解

    这篇文章主要介绍了VUE中的自定义指令钩子函数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 浅谈validator自定义验证及易错点

    浅谈validator自定义验证及易错点

    这篇文章主要介绍了validator自定义验证及易错点,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-02-02
  • 聊聊vue 中的v-on参数问题

    聊聊vue 中的v-on参数问题

    这篇文章主要介绍了聊聊vue 中的v-on参数问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-01-01
  • Vue 动态路由的实现详情

    Vue 动态路由的实现详情

    这篇文章主要介绍了Vue 动态路由的实现,动态路由是一个常用的功能,根据后台返回的路由json表,前端动态显示可跳转的路由项,本文主要实现的是后台传递路由,前端拿到并生成侧边栏的一个形势,需要的朋友可以参考一下
    2022-06-06
  • Vue+Vuex实现自动登录的知识点详解

    Vue+Vuex实现自动登录的知识点详解

    在本篇文章里小编给大家整理的是关于Vue+Vuex实现自动登录的知识点详解,需要的朋友们可以学习下。
    2020-03-03
  • Vue混入与插件的使用介绍

    Vue混入与插件的使用介绍

    这篇文章主要介绍了Vue混入与插件的使用,mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如data、components、methods 、created、computed等等
    2022-09-09
  • vue依赖包报错问题eslint\lib\cli-engine\cli-engine.js:421

    vue依赖包报错问题eslint\lib\cli-engine\cli-engine.js:421

    这篇文章主要介绍了vue依赖包报错问题eslint\lib\cli-engine\cli-engine.js:421,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue-element-admin如何转换成中文

    vue-element-admin如何转换成中文

    这篇文章主要介绍了vue-element-admin如何转换成中文问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 详解mpvue中小程序自定义导航组件开发指南

    详解mpvue中小程序自定义导航组件开发指南

    这篇笔记主要记录一下基于mpvue的小程序中实现自定义导航的思路及应用。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02

最新评论