小程序缓存插件怎么使用-创新互联

这篇文章主要介绍“小程序缓存插件怎么使用”,在日常操作中,相信很多人在小程序缓存插件怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序缓存插件怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、成都做网站、瓦房店网络推广、小程序制作、瓦房店网络营销、瓦房店企业策划、瓦房店品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;创新互联为所有大学生创业者提供瓦房店建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com

背景

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

对比

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

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


小程序缓存插件怎么使用

到此,关于“小程序缓存插件怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


标题名称:小程序缓存插件怎么使用-创新互联
文章URL:http://pwwzsj.com/article/dejcsh.html