十几个ajax请求如何优化,javascript - 怎么优化多个ajax请求

前端页面有五六个ajax请求,一打开那个页面好卡,怎么解决?

b3a1f106f284e02662873171e55a4907.png

代码

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值