请求取消（多种）

XMLHttpRequest

XMLHttpRequest 可以使用 abort() 方法来实现请求取消。

  const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:3000/api/txt');

    xhr.timeout = 2;
    xhr.ontimeout = function () {
        xhr.abort();
        console.error('请求超时，已中断');
    };

    xhr.onload = function () {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        }
    }
    
    send.onclick = function () {
        xhr.send();
    }

fetch

fetch 内部API并不能实现请求的取消，需要借助 AbortController来实现。

AbortController接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。

要完成请求取消，就必须要与异步请求进行通讯，使用AbortSignal对象可以完成与异步操作的通信。而 AbortController.signal会返回一个AbortSignal 对象实例,作为一个选项传递进入请求的选项对象中，就是作为请求第二参数对象的属性，这将 signal 和 controller 与 fetch 请求相关联，并且允许我们通过调用 AbortController.abort() 去中止它， AbortController.abort()方法可以中止一个尚未完成的异步操作。

• 创建了一个AbortController对象
  在请求外部创建AbortController对象

 const controller = new AbortController();

• 通过controller.signal获取对应的AbortSignal对象。

const signal = controller.signal

• 将AbortSignal对象作为Fetch请求的signal选项传递给fetch函数

fetch('http://localhost:3000/api/txt',
            {
                signal // AbortSignal对象
            }
        )

• 调用controller.abort()方法，触发AbortSignal对象的abort事件，终止Fetch请求

 stop.addEventListener('click',()=>{
        // 终止请求
        controller.abort();
    })

• 在请求被终止后，进入catch块，进行错误处理。
  需要注意的是，终止请求后，Fetch请求的Promise会被拒绝，并且会抛出一个AbortError错误。因此，在处理错误时，可以通过判断错误类型为AbortError来区分是否是请求被终止的情况。

catch(error => {
            // 处理错误
            if (error.name === 'AbortError'){// 中断请求
                alert('请求被终止')
            }else {
                console.error(error);
            }
        });

使用AbortController和AbortSignal可以灵活地控制和终止Fetch请求，特别适用于需要及时取消请求的场景，如用户取消操作或超时处理。

Axios

Axios本质还是 XMLHttpRequests

从 v0.22.0 开始，Axios 支持以 fetch API 方式—— AbortController 取消请求：

const controller = new AbortController();
axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

也可以用cancel token 取消一个请求。Axios 的 cancel token API 从 v0.22.0 开始已被弃用

具体可以查阅官网