请求取消（多种）

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