Detailed explanation of the WeChat applet request pre-processing method

question

Because some of our pages request data in onload and then render the view, if we can move the data request step forward before the mini program page jumps, we can request the data earlier. The effect of the optimization depends on the time required for the page jump.

need

A request pre-processing method is needed to make full use of the jump time and request interface data in advance, but to minimize the cost of modifying old projects. Because the small program project I am responsible for now uses axios to request interface data, here I will only give an example of the transformation idea of ​​post in axios. Here I rewrite the post method to cache the interfaces that need to be requested in advance when requesting, and return the promise of the first request when the second request is made, so that there is no need to initiate a new request.

Specific steps

1. Modify the post method

http file

let instance = axios.create({ // Create an axios request instance // Omit some code});

let { post } = instance; // Save the original post method let cache = {}; // Request cache instance.post = function(...list) {

 let [url, data = {}] = list;

 if (cache[url]) { // Return the pre-requested promise
 let pre = cache[url];
 delete cache[url];
 return pre;
 }

 if (data.pre) { //Use pre as a pre-request to determine if it is a pre-request delete data.pre;
 cache[url] = post(...list)
 return cache[url];
 }

 return post(...list); //normal request}

2. Use

The page before the jump, that is, the previous page

// Omit some code...

// This is the data to be requested from the interface on the next page. Request it in advance before wx.navigateTo jumps and store it.
$http.post('/act/activities/lucky:search', { activityId: 12 , pre: true })

wx.nextTick(() => { //Using wx.nextTick allows the above request to be sent first and then jump wx.navigateTo({
 url: `${TYPE_TO_ROUTE_MAP[templateType]}?id=${activity.activityId}`
 });
})

// Omit some code...

Effect

Not using preloading

Using Preload

The width difference of the red boxes indicates how much time is required to request the interface data in advance, which is about 100ms. Because the static resource address below comes from the interface data, it is equivalent to reducing the resource loading time after the congestion by about 100ms.

Summarize

• The principle is to use the time of the applet jump to request data in advance, so it will benefit more for mobile phones with poor performance. Although it seems to save about 100ms in the developer tool, there are the following two limitations:
• The page is loaded and the data in the pre-requested interface data is required
• It is necessary to initiate a pre-request on the previous page and perform nextTick processing on the jump

As a result, the benefits of this optimization are indeed somewhat useless for the entire project.

This is the end of this article about WeChat Mini Program request pre-positioning. For more relevant Mini Program request pre-positioning content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!