WeChat applet problem--invokeWebviewMethod data transmission length is 1227297, which has exceeded the maximum length of 1048576

The data transfer length of invokeWebviewMethod is 1227297, which has exceeded the maximum length of 1048576

 I have been in contact with

The first  time I saw this sentence, I couldn’t understand it. If it is from the background It's a bit embarrassing when the data sent is too long, because we do paging, and read 10 pieces of data from the background each time, and read 10 more pieces of data when the page is pulled down. No matter how complicated the data is, 10 pieces of data can definitely be loaded. We define an empty array lists during initialization. The purpose is to push into the lists every time 10 pieces of data are loaded, as shown in the figure: 

I print my Initially defined lists values, the first 80 items did not report errors, indicating that the list data transmission is too long, and then I looked at the data structure returned from the background, as follows: * 

At first glance , this data is not too complicated, When I click on the skuList of the product pointed by the arrow, the data I get are as follows: 

Because the number of each item in the array is different, I randomly found the item in the skuList with relatively more content, so that I can explain it to you. Why do you say that the data is too long? Explain that our products have the function of secondary classification, and the background directly provides all the products to us through an interface, so it seems that there is a lot of data.  Let 
me
 
In fact, it is very simple. The function we need to do is to click the switch corresponding to each product to control whether the product can be displayed in front of the user. Let this product be put on the shelves. As you can see from the picture, we need only four contents: picture, product name, switch status, and product ID. Since there are only these four items, why does my list need to collect all the parameters, so we can do the following:

success: function(res) {
    if(res.data.code =="200"){
        var list = res.data.object.productListByPage.list;
              list.forEach(function(item,index,array){
                  array[index] = {
                      firstImage:item.imageList[0].url,
                      name:item.name,
                      productId:item.productId
                  }
              });
        that.pages = res.data.object.productListByPage.pages;
        that.goodsLists = that.goodsLists.concat(list);
        that.loadShow(that.goodsLists);  
        that.currentPage += 1;
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

 After filtering

When  I pull down to the bottom, there is no problem of too long data transmission, as follows: 

You can see that when the lists reach 80 items, It is reported that the data transmission length of invokeWebviewMethod is 1227297, which has exceeded the maximum length of 1048576. Now it has been fully loaded, because there are only 163 items in our database, you can see that the filtered array of 163 items is all printed out. 
Summary:  
When  such a problem occurs, we first go to the back office to discuss whether we can simplify the data in the database. The back office said it is easy, and the parts involving commodities are inherently complicated. In order not to bother the back office, I think front-end processing is also It works, so I solved this error smoothly. 
When  I encounter an error, my first reaction is to see if anyone else has encountered it on the Internet, and then I see the official solution, as follows:  It

is the  setData step that has a problem, so , as far as the front-end simplifies the data is feasible