Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use the Mini Program cache plug-in". In daily operation, I believe many people have doubts about how to use the Mini Program cache plug-in. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about how to use the Mini Program cache plug-in! Next, please follow the editor to study!

Background

Wx.request is the API provided by Mini Program, which is used to initiate network requests. In frequent and slow response services, the page white screen or loading time is correspondingly long. However, reasonable use of cache is a good means to improve interface response speed and reduce the consumption of network resources.

Mrc provides two conversion modes for use in the business

Short-term cache

For business scenarios with relatively low real-time requirements, short-term caching can be used.

Short-term cache can cache the interface data within a certain period of time. If you request it again within the time range, you can directly use the cached data to reduce the white screen or loading time. Setting different cache time to adapt to different services can also effectively save network resources.

Snapshot cach

Compared with the snapshot of search engine, snapshot cache can be used for scenarios with slow response to requests and high real-time performance.

Snapshot cache each request will first return the last cached data as a result, and then go to the request, and then update the cache after the request is returned. The business side can perform local rendering by comparing the returned results of the two times.

Use

Mrc encapsulates native resquest API in a least intrusive way, extends the functionality of native API, and supports promise and two caching methods.

/ / app.js// introduces request cache plug-in import Mrc from'. / dist/mrc.min' / / instantiate a global reference App ({wxp: new Mrc ({prefix:'_ _ CACHE___', / / optional), store field prefixes. Default _ _ CACHE___ timeout: 600000, / / optional, how long to cache (in ms) Default 10 minutes}),}) / page.jsconst app = getApp () let {wxp} = appPage ({data: {}, onLoad: function () {wxp.request ({url: 'http://xxxxxx', cache: {enable: true, / / optional, whether to enable cache, default false type:' snapshot', / / optional, enable cache type, timeout), snapshot (snapshot) Default timing timeout: 600000, / / optional, timing cache time, use priority, current configuration > global configuration > default configuration},}) .then ((res) = > {/ / Snapshot cache will return one more formally requested promise object to obtain the formally requested data return res.req }) .then ((res) = > {console.log (res);})},})

Characteristics

When the cache type is snapshot cache, the cached data is persistent and the timeout setting is invalid

When the cache type is snapshot cache, the first then callback takes the formally requested promise object, which is used for the next then callback to obtain the officially requested data.

When you do not want to use caching (enable=false), you can also use mrc to instantiate the normal request for the object and support promise.

Contrast

Whether the type is persisted or whether the real-time snapshot cache is requested every time whether the short-term cache is high or not

It works better with the skeleton screen!

At this point, the study on "how to use the Mini Program cache plug-in" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.