在请求的过程当中,结果还没有回来之前,我们可以通过代码手动取消请求
为了实现手动取消的效果,服务器端还是 3s 以后才会返回数据
app.get('/delay', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*')
response.setHeader('Access-Control-Allow-Headers', '*')
setTimeout(() => {
response.send('HELLO IE')
}, 3000);
})
通过 xhr 对象的 abort() 方法就可以手动取消请求
xhr.abort();
此时点击按钮发送请求等待 3s 返回结果的过程中,我们点击取消按钮就可以取消这个请求
整理如下
const result = document.querySelector("#result");
const btn1 = document.querySelector("#send");
const btn2 = document.querySelector("#cancel");
// 为了让 btn1 和 btn2 都能调用 xhr,所以写在外面
let xhr = null;
btn1.addEventListener("click", () => {
xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:8000/delay");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
result.innerHTML = xhr.response;
}
}
};
});
btn2.addEventListener("click", () => {
xhr.abort();
});