详解小程序缓存插件(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 相关文章推荐
Javascript跨域请求的4种解决方式
Mar 17 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 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页面函数设置超时限制的方法
2014/12/01 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
php压缩文件夹最新版
2018/07/18 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
python实现删除文件与目录的方法
2014/11/10 Python
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
python3 配置logging日志类的操作
2020/04/08 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
数据管理员的自我评价分享
2013/11/15 职场文书
财务人员个人工作总结
2015/02/27 职场文书