1.AbortController
创建了一个AbortController对象,并将其signal属性传递给Fetch请求。在中断请求时,我们可以使用AbortController对象的abort()方法。
function myFetch() {
// 创建AbortController对象
const controller = new AbortController();
const signal = controller.signal;
fetch('https://www.baidu.com', {
method: 'post',
signal,
headers: {
'Content-Type': 'application/json'
}
}).then(res => res.json()).then(res => {
console.log(res);
return res;
}).catch(e => {
if(error.name === 'AbortError') {
console.log('请求已经中断');
}
console.log(e);
})
setTimeout(()=> {
controller.abort();
}, 1000)
}
2.使用XMLHttpRequest的abort()方法
MLHttpRequest(以下简称XHR)是一个Web API接口,用于发送HTTP请求和接收HTTP响应。通过XHR发送的请求可以使用abort()方法中断。在中断请求时,该方法会将请求的状态置为abort,并会终止请求的发送和响应的接收。
var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open('GET', 'http://example.com/data.json', true); // 发送一个异步GET请求
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
// 响应已经成功接收
}
};
xhr.send();
// 在发送请求后一段时间内中断请求
setTimeout(function() {
xhr.abort();
}, 5000);