【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