详解小程序缓存插件(mrc)
更新时间：2018年08月17日 10:08:41 作者：jayzou
这篇文章主要介绍了详解小程序缓存插件(mrc)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
背景
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);
})
},
})
特性
- 缓存类型为快照缓存时，缓存的数据为持久缓存，timeout设置无效
- 缓存类型为快照缓存时，第一个then回调会带上正式请求的promise对象，用于下个then回调获取正式请求的数据
- 不想使用缓存时（enable=false），一样可以用mrc实例化之后的对象正常请求，支持promise
对比
| 类型 | 是否持久化 | 是否每次都请求 | 实时性 |
|---|---|---|---|
| 快照缓存 | 是 | 是 | 高 |
| 短期缓存 | 否 | 否 | 低 |
配合骨架屏来使用效果更佳！！！
总结
缓存插件的使用可以有效的提升页面打开速度，并且在频繁的网络请求中可以有效的节约服务器资源。具体的调用方式和源码，请看 github ，最后求start
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript常用判断写法(推荐)的相关资料，非常不错具有参考借鉴价值,需要的朋友可以参考下2016-05-05
在Vue项目中实现数据加密,首先需要安装SM2加密库,如js-sm2或sm-crypto,通过npm或yarn进行安装后,在Vue组件或文件中引入该库,并使用其提供的加密、解密功能,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了JS数组的常用10种方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
在写js的时候,很多时候都会遇到异步转同步的问题,下面这篇文章主要给大家介绍了关于JS中如何让异步执行的方法同步执行的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
本文分享了JavaScript实现倒计时跳转页面功能的具体实例代码，页面代码简单，直接拷贝就能运行，页面可以自己美化下哦。需要的朋友一起来看下吧2016-12-12
JavaScript数组是一种特殊类型的对象,用于存储多个值,数组中的每个值都有一个索引,索引从0开始,数组中的值可以是任何数据类型,包括数字、字符串、布尔值、对象和函数,2024-10-10
这篇文章主要为大家详细介绍了微信小程序实现图片压缩功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
超级标签之一键解除网页复制限制、网页自由编辑、显示星号密码功能代码
实现以上功能不用安装任何插件，把下列书签图标拖动到浏览器书签栏，就可以实现一键解除网页复制限制、网页自由编辑、显示星号密码功能2022-09-09
AngularJs中Bootstrap3 datetimepicker使用实例
这篇文章主要为大家详细介绍了AngularJs中Bootstrap3 datetimepicker使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
微信小程序--onShareAppMessage分享参数用处(页面分享)
本篇文章主要介绍了微信小程序的页面分享onShareAppMessage分享参数用处的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
最新评论