javascript - How to optimize multiple ajax requests

Question

There are five or six ajax requests on the front-end page. When I open that page, it gets stuck. How to solve it?

Code

//fetch异步请求函数
      function status(response){
          if(response.status>=200 && response.status<300){
              return Promise.resolve(response);
          }
          else{
              return Promise.reject(new Error(response.statusText));
          }
      }
      function json(response){
          return response.json();
      }

      function ctrlset(){
          fetch("/cmdopen")
              .then(status)
              .then(json)
              .then(function (data) {
                  console.log('ok');
              })

      }
      //请求数据函数
      function getData(){
        fetch("/numsum")
            .then(status)
            .then(json)
            .then(function (data) {
                var num = document.getElementById("numbersum");
                num.innerHTML = data;
            })
        //请求风扇是否打开
        fetch("/feng")
          .then(status)
          .then(json)
          .then(function(data){
{#            var p = document.getElementById('fengshan');#}
            var feng1 = document.getElementById('feng1');
            var feng0 = document.getElementById('feng0');
            if (data[data.length-1] == 1) {
              feng1.style.display = "block";
              feng0.style.display = "none";
            }else{
              feng1.style.display = "none";
              feng0.style.display = "block";
            }
          })

         //请求宠物是否在屋内
        fetch("/indoor")
          .then(status)
          .then(json)
          .then(function(data){

            var p = document.getElementById('indoor');
            var image1 = document.getElementById('image1');
            var image0 = document.getElementById('image0');

              if(data[data.length-1] == 1){
                 image0.style.display = "none";
                 image1.style.display = "block";
              }else{
                 image1.style.display = "none";
                 image0.style.display = "block";
              }
          })
          .catch(function(err){
              console.log("Fetch错误:"+err);
          });

              //请求时间
        fetch("/time")
          .then(status)
          .then(json)
          .then(function(data){
              // 折线图湿度
              myChart.setOption({
                      xAxis:{
                  data:data
                }
              });
          })
          .catch(function(err){
              console.log("Fetch错误:"+err);
          });

        //请求温度数据
        fetch("/tem")
          .then(status)
          .then(json)
          .then(function(data){
              //折线图温度
              myChart.setOption({

                     series: [{
                         // 根据名字对应到相应的系列
                         name: 'TEM',
                         data: data
                     }]
              });
          })
          .catch(function(err){
              console.log("Fetch错误:"+err);
          });

        //请求湿度数据
      fetch("/hum")
        .then(status)
        .then(json)
        .then(function(data){
            // 折线图湿度
            myChart.setOption({
                   series: [{
                       // 根据名字对应到相应的系列
                       name: 'HUM',
                       data: data
                   }]
            });
        })
        .catch(function(err){
            console.log("Fetch错误:"+err);
        });
      }

    //定时更新数据
    setInterval('getData()',10);

Answer 1

setInterval('getData()',10);

Can you capture data every ten milliseconds without getting stuck? The data has not come back yet and 2 more have been sent out. It will continue indefinitely

Answer 2

First determine the issue of page lag.

Page lags are generally caused by DOM rendering problems. You will understand if you check it with F12. Don’t blame ajax. For example, if you ajax an html and then render it, it will definitely be stuck.

Answer 3

may be related to the quantity of ajax, but it should not be the main reason, because after all, ajax is asynchronous, and the slowness may be due to the large amount of data obtained. If the amount of data is obtained at once, it is recommended You load in batches, don’t fetch all the data at once;

If there are too many ajax, then you can load them in sections appropriately. For example, the original 6 ajax are divided into two sections. After the three ajax of the first section are loaded, load the next section

Answer 4

When initializing the page, if the code is unavoidable, add loading to solve it

Answer 5

Use Promise for delayed processing.

Answer 6

Please post the page code, preferably with a Chrome Timing screenshot.