javascript - Bagaimana untuk mengoptimumkan berbilang permintaan ajax

Question

Terdapat lima atau enam permintaan ajax pada halaman hujung hadapan Apabila saya membuka halaman itu, ia tersekat.

Kod

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

Bolehkah anda menangkap data setiap sepuluh milisaat tanpa tersekat? Data belum kembali dan 2 lagi telah dihantar. Ia akan berterusan selama-lamanya

Answer 2

Tentukan dahulu isu lag halaman.

Lag halaman biasanya disebabkan oleh pemaparan DOM Anda akan faham jika anda menyemaknya dengan F12 Contohnya, jika anda ajax html dan kemudiannya, ia pasti akan tersekat.

Answer 3

dan ajax数量可能有关系，但应该不是主要原因，因为毕竟ajax adalah tidak segerak Kelambatan mungkin disebabkan oleh jumlah data yang agak besar yang diperolehi

Jika ia

dimuat, kemudian muatkan bahagian seterusnyaajax太多的情况，那么可以适当的分段加载，比如原先6个ajax，分成两段，第一段的三个ajax

Answer 4

Apabila memulakan halaman, jika kod tidak dapat dielakkan, tambahkan pemuatan untuk menyelesaikannya

Answer 5

Gunakan Promise untuk pemprosesan yang tertangguh.

Answer 6

Sila siarkan kod halaman, sebaik-baiknya dengan tangkapan skrin Pemasa Chrome.