【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);             })     }, })

特性

1. 缓存类型为快照缓存时，缓存的数据为持久缓存，timeout设置无效

2. 缓存类型为快照缓存时，第一个then回调会带上正式请求的promise对象，用于下个then回调获取正式请求的数据

3. 不想使用缓存时（enable=false），一样可以用mrc实例化之后的对象正常请求，支持promise

对比

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

进阶

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

总结

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

原文链接：https://segmentfault.com/a/1190000016040836