Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to realize the network request cache in WeChat Mini Programs". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "how to realize the network request cache in WeChat Mini Programs" can help you solve the problem.

Demand

When submitting Mini Program for review, there is an experience evaluation, and the product allows us to optimize Mini Program according to Mini Program's experience evaluation report.

One of them is the optimization of network requests, which gives us a big problem.

It is explained in the document as follows: within 3 minutes, the same url request does not have exactly the same content with a return packet larger than 128KB twice.

When you see this problem, the first thing that comes to mind is to add cache-control to the response header. Tests have found that Mini Program does not support web request caching. Search found an official clear answer: Mini Program does not support web request caching: wx.request does not support http caching

Since the authorities do not support network request caching, they have to find their own way to solve this problem.

Let's take a look at the requirements: the same request can only be requested once in 3 minutes.

Analysis.

Analysis:

You only need to do the network cache for GET requests.

How to control the cache time.

After caching, how to know whether the request has been updated on the server in 3 minutes.

Check whether there is a cache locally before submitting the GET request

The first two points are easy to implement. Although Mini Program does not support network request caching, we can still use cache-control to achieve this function.

First of all, whether the network request needs the emotional cache is handed over to the server to do, and the server adds the response header cache-control when dealing with the GET request. If it needs caching, it uses max-age=180, and if it does not need to make a network request, it uses no-cache. The front end makes its own front-end cache according to the response header information.

The difficulty is how the front end knows whether the server data is updated or not. If the server data is updated, the front end still uses caching, which is a problem.

After some thinking, it is found that after the front end submits the data, the corresponding GET request data will be updated, that is, as long as the front end has the data submitted, it should empty the cache.

There is a difficulty. When the current end submits data, the frontend does not know which GET requests will update the data, so we have not solved this problem. My method is rough: as long as the frontend submits the data, all caches will be cleared. This is a problem of curing the symptoms rather than the root of the problem.

Realize

The company project encapsulates the HTTP request

Intercept requests. If it is a GET request, check the cache.

If the cache does not expire, the cache is returned and no more requests are made.

If the cache expires, send a request

If (request.method.toLowerCase () = "get") {/ / param request information const cache = this.handleCatchControl (request) if (! cache.isRequest) return this.listener.onApiResponse (request, 200, cache.data), sequence; / / returns the cache to the corresponding request}

Cache network requests

/ / param response header, context, response data this.setCatchControl (headers, context, response.data)

Two tool functions

Dealing with network caching

Set up network cache

Set up network request

GET requests to cache data, and other requests to empty data

Data format:

/ / if multiple `GET` requests are initiated at the same time, the cache data ApiAgent.cacheData = Object.assign (ApiAgent.cacheData, {[context.request.url]: {/ / api data, / / response data expireTime: Number (cacheControl.split ("=") [1] + '000'), / / expiration time cacheTime: new Date (). GetTime (), / / cache time}}) / / param response header is required before splicing. Response data setCatchControl (responseHeader: any, context: any, data: any) {if (context.request.method.toLowerCase ()) = "get") {const headers = HandleHeaders.get (responseHeader) const cacheControl = headers ["cache-control"] if (cacheControl & & cacheControl! = = "no-cache") {ApiAgent.cacheData = Object.assign (ApiAgent.cacheData, {[context.request.url]: {data, expireTime: Number (cacheControl.split ("=") [1] + '000') CacheTime: new Date () .getTime (),})} else {ApiAgent.cacheData = {}

Dealing with network caching

Determine whether the cache exists

Determine whether the cache expires. When setting the cache, compare whether the current time and the cache time are less than the expiration time.

/ / param request information handleCatchControl (request): any {const cacheArr = ApiAgent.cacheData if (Object.keys (cacheArr). Length = = 0) return {isRequest: true} let cache = {} Object.keys (cacheArr) .forEach (cacheArrKey = > {if (cacheArrKey = request.url) {cache = cacheArr [cacheArrKey]}}) const newDate = newDate (). GetTime () if (newDate-cache.cacheTime)

< expireTime){ return { isRequest: false, data: cache.data } } return { isRequest: true}} 响应头全部变成小写，在小程序中，无法确定响应头的大小写会导致报错，所以统一处理响应头 class HandleHeaders { static get(headers: { [key: string]: string }) { const headersData: any = {} Object.keys(headers).forEach(key =>

{headersData [key.toLowerCase ()] = headers [key]}) return headersData}} about "how to implement the network request cache in WeChat Mini Programs", thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.