背景
wx.request
是小程序提供的api,用于发起网络请求,在频繁并且响应较慢的业务中的请求,页面白屏或者loading时间也相应比较长,然而合理的利用缓存是个很好提升界面响应速度,减少网络资源占用的手段。
mrc提供2种换成模式用于业务中使用
短期缓存
对于实时性
要求相对较低的业务场景而言,可以使用短期缓存
。
短期缓存能够将接口数据在一定时间内缓存起来,在时间范围内再次请求的话,可以直接使用缓存数据,减少白屏或者loading时间。设置不同的缓存时间来适应不同的业务,还可以有效的节约网络资源
快照缓存
类比搜索引擎的快照,针对请求响应较慢的并且实时性又比较高的场景而言,可以使用快照缓存。
快照缓存每次请求都会先返回上一次缓存数据作为结果返回,然后再去请求,等到请求返回之后再更新缓存,业务方可以对比2次返回结果进行局部渲染
使用
mrc以一种侵入式最小的方式封装了原生的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); }) }, })
特性
对比
类型 | 是否持久化 | 是否每次都请求 | 实时性 |
---|---|---|---|
快照缓存 | 是 | 是 | 高 |
短期缓存 | 否 | 否 | 低 |
配合骨架屏来使用效果更佳!!!
总结
缓存插件的使用可以有效的提升页面打开速度,并且在频繁的网络请求中可以有效的节约服务器资源。具体的调用方式和源码,请看 github ,最后求start
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论