详解小程序缓存插件(mrc)


Posted in Javascript onAugust 17, 2018

背景

wx.request是小程序提供的API,用于发起网络请求,在频繁并且响应较慢的业务中的请求,页面白屏或者loading时间也相应比较长,然而合理的利用缓存是个很好提升界面响应速度,减少网络资源占用的手段。

mrc提供2种换成模式用于业务中使用

短期缓存

对于实时性要求相对较低的业务场景而言,可以使用短期缓存

短期缓存能够将接口数据在一定时间内缓存起来,在时间范围内再次请求的话,可以直接使用缓存数据,减少白屏或者loading时间。设置不同的缓存时间来适应不同的业务,还可以有效的节约网络资源

快照缓存

类比搜索引擎的快照,针对请求响应较慢的并且实时性又比较高的场景而言,可以使用快照缓存。

快照缓存每次请求都会先返回上一次缓存数据作为结果返回,然后再去请求,等到请求返回之后再更新缓存,业务方可以对比2次返回结果进行局部渲染

使用

mrc以一种侵入式最小的方式封装了原生的resquest API,扩展原生API的功能,可以支持promise以及2种缓存方式。

//app.js

//引入request缓存插件
import Mrc from './dist/mrc.min';

//实例化一个全局引用
App({
 wxp: new Mrc({
  prefix: '___CACHE___',   //选填,存储字段前缀,默认___CACHE___
  timeout: 600000,    //选填,缓存多长时间,单位ms,默认10分钟
 }),
})
//page.js
const app = getApp()
let {wxp} = app
Page({
 data: {

 },
 onLoad: function () {
  wxp.request({
   url: 'http://xxxxxx',
   cache: {
    enable: true,    //选填,是否开启缓存,默认false
    type: 'snapshot',   //选填,开启缓存类型,定时(timeout)、快照(snapshot),默认定时
    timeout: 600000,    //选填,定时缓存时间,使用优先级,当前配置>全局配置>默认配置
   },
  })
   .then((res) => {
    //快照缓存时会多返回一个正式请求的promise对象,用于获取正式请求的数据
    return res.req;
   })
   .then((res) => {
    console.log(res);

   })
 },
})

特性

  1. 缓存类型为快照缓存时,缓存的数据为持久缓存,timeout设置无效
  2. 缓存类型为快照缓存时,第一个then回调会带上正式请求的promise对象,用于下个then回调获取正式请求的数据
  3. 不想使用缓存时(enable=false),一样可以用mrc实例化之后的对象正常请求,支持promise

对比

类型 是否持久化 是否每次都请求 实时性
快照缓存
短期缓存

配合骨架屏来使用效果更佳!!!

详解小程序缓存插件(mrc)

总结

缓存插件的使用可以有效的提升页面打开速度,并且在频繁的网络请求中可以有效的节约服务器资源。具体的调用方式和源码,请看 github ,最后求start

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

Javascript 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
vue.js封装switch开关组件的操作
Oct 26 Javascript
layui 设置table 行的高度方法
Aug 17 #Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 #Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 #jQuery
layui的table中显示图片方法
Aug 17 #Javascript
layerUI下的绑定事件实例代码
Aug 17 #Javascript
JS实现的视频弹幕效果示例
Aug 17 #Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 #Javascript
You might like
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
图片按比例缩放函数
2006/06/26 Javascript
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
python实现备份目录的方法
2015/08/03 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
Numpy之reshape()使用详解
2019/12/26 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
体育教师自荐信范文
2013/12/16 职场文书
运动会通讯稿500字
2014/02/20 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
财务会计求职信范文
2015/03/20 职场文书
大学入学感言
2015/08/01 职场文书
MySQL 数据类型详情
2021/11/11 MySQL
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle