inula/packages/inula-request/examples/cancelRequest/cancelRequestTest.html

50 lines
1.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inula Request Cancel Request Test</title>
<link rel="stylesheet" type="text/css" href="cancelStyles.css">
</head>
<body>
<header>Inula Request Cancel Request Test</header>
<div class="container">
<div class="button-group">
<button id="sendRequestButton">Send Request</button>
<button id="cancelRequestButton">Cancel Request</button>
</div>
<div class="message" id="message">等待发送请求...</div>
</div>
<script src="../../dist/bundle.js"></script>
<script>
import inulaRequest from "../../index";
const sendRequestButton = document.getElementById('sendRequestButton');
const cancelRequestButton = document.getElementById('cancelRequestButton');
const message = document.getElementById('message');
let controller = new AbortController;
const signal = controller.signal;
sendRequestButton.addEventListener('click', function() {
setInterval(function() {
inulaRequest.get('http://localhost:3001/data', {
signal
}).then(function(response) {
message.innerHTML = '请求成功: ' + JSON.stringify(response.data, null, 2);
}).catch(function(error) {
if (inulaRequest.isCancel(error)) {
message.innerHTML = '请求已被取消: ' + error.message;
} else {
message.innerHTML = '请求出错: ' + error.message;
}
});
}, 1000)
});
cancelRequestButton.addEventListener('click', function () {
controller.abort();
});
</script>
</body>
</html>