资讯专栏INFORMATION COLUMN

【mrc】小程序缓存插件

fanux / 2690人阅读

摘要:背景是小程序提供的,用于发起网络请求,在频繁并且响应较慢的业务中的请求,页面白屏或者时间也相应比较长,然而合理的利用缓存是个很好提升界面响应速度,减少网络资源占用的手段。

背景

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/62011.html

相关文章

  • curl_multi实现并发

    摘要:普通请求创建多个资源并发创建多个资源创建批处理句柄增加句柄待优化点在执行而整个批处理句柄没有全部执行完毕时,系统会不停地执行函数。进行改动的方式是应用函数库中的函数,其函数原型如下阻塞直到批处理连接中有活动连接。 普通请求 curl_normal.php use time:0.830 s curl_multi并发 curl_multi.php use time:0.259 s ...

    shusen 评论0 收藏0

发表评论

0条评论

fanux

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<