前端循环请求
2023-12-16 本文已影响0人
xueyueshuai
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<label for="url">url:</label><input style="width: 300px;" id="url" value="http://localhost:9409/api/Demo/test14"/>
</div>
<div>
<label for="step">step:</label><input style="width: 300px;" id="step" value="100"/>
</div>
<div>
<label for="start_i">start: i = </label><input style="width: 100px;" id="start_i" value="1"/>
</div>
<div>
<label for="end_i">end: i = </label><input style="width: 100px;" id="end_i" value="5"/>
</div>
<div>
后台终止标志: <input style="width: 100px;" id="finish_flag" value="res.data.finish"/><label for="finish_flag"> =
true</label>
</div>
<div>
<button onclick="start()">开始</button>
<button onclick="stop()">停止</button>
<button onclick="goOn()">继续</button>
</div>
<fieldset>
<legend>startStr</legend>
<div id="startStr"></div>
</fieldset>
<fieldset>
<legend>doStr</legend>
<div id="doStr"></div>
</fieldset>
<fieldset>
<legend>endStr</legend>
<div id="endStr"></div>
</fieldset>
<script>
let stopValue = false;
let stopI = 1;
function getStartI() {
let ele = document.getElementById('start_i');
return ele.value;
}
function getEndI() {
let ele = document.getElementById('end_i');
return ele.value;
}
function getFinishFlag() {
let ele = document.getElementById('finish_flag');
return ele.value;
}
function isFinish(res) {
let v = getFinishFlag().split('.').reduce((acc, current) => {
return acc?.[current];
}, {res});
return v === true;
}
function start() {
stopValue = false;
['doStr', 'startStr', 'endStr'].forEach(item => {
let ele = document.getElementById(item);
if (ele) {
ele.innerHTML = ''
}
})
document.getElementById('startStr').innerHTML = '开始start_i:' + getStartI();
handleUrl(getStartI())
}
function stop() {
stopValue = true;
}
function goOn() {
stopValue = false;
handleUrl(stopI)
}
function handleUrl(i) {
i *= 1;
if (stopValue) {
stopI = i;
document.getElementById('endStr').innerHTML = getStartI() + '~' + (i - 1) + ' done 程序stop';
return false;
}
let urlEle = document.getElementById('url');
url = urlEle.value;
let end_i = getEndI()
if (i > end_i) {
document.getElementById('endStr').innerHTML = getStartI() + '~' + getEndI() + ' done';
return false;
}
let body = {
i: i,
step: document.getElementById('step').value * 1
}
document.getElementById('doStr').innerHTML = i + ' is doing';
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(body),
}).then(response => {
return response.json()
}).then(res => {
document.getElementById('doStr').innerHTML = i + ' is done';
document.getElementById('endStr').innerHTML = getStartI() + '~' + i + ' done';
if (isFinish(res)) {
document.getElementById('endStr').innerHTML = getStartI() + '~' + i + ' done (后台说已经完毕)';
} else {
handleUrl(i + 1)
}
}).catch(err => {
// 处理错误
console.log(err)
});
}
</script>
</body>
</html>
