JS取消http请求

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