javascript - Comment optimiser plusieurs requêtes Ajax

Question

Il y a cinq ou six requêtes ajax sur la page front-end. Lorsque j'ouvre cette page, elle reste bloquée. Comment le résoudre ?

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);

Pouvez-vous capturer des données toutes les dix millisecondes sans rester bloqué ? Les données ne sont pas encore revenues et 2 autres ont été envoyées. Cela continuera indéfiniment

.

Answer 2

Déterminez d’abord le problème du décalage de page.

Les retards de page sont généralement causés par le rendu DOM. Vous comprendrez si vous le vérifiez avec F12. Ne blâmez pas ajax. Par exemple, si vous ajaxez un code HTML et que vous le restituez ensuite, il sera définitivement bloqué.

Answer 3

et ajax数量可能有关系，但应该不是主要原因，因为毕竟ajax sont asynchrones. La lenteur peut être due à la quantité relativement importante de données obtenues en une seule fois, il est recommandé de la charger par lots au lieu de récupérer toutes les données en même temps

 ;

S'il est ajax太多的情况，那么可以适当的分段加载，比如原先6个ajax，分成两段，第一段的三个ajaxchargé, chargez la section suivante

Answer 4

Lors de l'initialisation de la page, si le code est inévitable, ajoutez un chargement pour le résoudre

Answer 5

Utilisez Promise pour un traitement retardé.

Answer 6

Veuillez envoyer à la personne qui pose la question le code de la page, de préférence avec une capture d'écran Chrome Timing.