页面离开 axios 终止请求
在前端开发中，我们经常使用 axios 来发送 HTTP 请求。然而，当用户在请求还未完成的时候离开当前页面，可能会导致一些问题，比如请求的结果被丢弃，浪费网络资源。为了避免这个问题，我们需要在页面离开时终止正在进行的请求。
本文将介绍如何使用 axios 终止请求，并提供代码示例来帮助读者理解。
什么是 axios
axios 是一个基于 Promise 的 HTTP 客户端库，可以在浏览器和 Node.js 中发送 HTTP 请求。它提供了一些强大的功能，比如拦截请求和响应、转换请求和响应数据等。
axios 的使用非常简单，我们只需要引入 axios 库，然后使用 axios 对象来发送请求。以下是一个简单的 axios 请求示例：
import axios from 'axios';
axios.get('/api/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
上面的代码发送了一个 GET 请求到 /api/users 接口，并在控制台输出响应数据。然而，如果用户在请求还未完成的时候离开当前页面，可能会导致请求被丢弃，造成资源的浪费。
如何终止 axios 请求
为了解决上述问题，axios 提供了一个 CancelToken 类来终止请求。CancelToken 是一个工厂函数，用于创建一个取消令牌，我们可以将这个令牌传递给 axios 请求的 cancelToken 配置项，以便在需要时取消请求。
下面是一个使用 CancelToken 终止请求的示例代码：
import axios from 'axios';
// 创建取消令牌
const source = axios.CancelToken.source();
// 发送请求
axios.get('/api/users', {
cancelToken: source.token
})
.then(response => {
console.log(response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('请求被取消');
} else {
console.error(error);
}
});
// 在页面离开时取消请求
window.addEventListener('beforeunload', () => {
source.cancel('页面离开，取消请求');
});
上面的代码中，我们首先创建了一个取消令牌 source，然后将这个令牌传递给 axios 请求的 cancelToken 配置项。在页面离开时，我们调用 source.cancel 方法取消请求，并传递一个取消原因给它。
当请求被取消时，axios.isCancel 方法会返回 true，我们可以根据这个条件来处理取消请求的情况。
需要注意的是，我们在 beforeunload 事件中取消请求，这个事件会在用户离开页面之前触发。但是，这个事件在一些情况下可能不会触发，比如用户直接关闭浏览器窗口或者刷新页面。为了更好地处理这些情况，我们可以使用 unload 事件来取消请求，不过需要注意的是，unload 事件不能阻止页面的关闭或刷新。
使用 AbortController 终止请求
除了使用 CancelToken，我们还可以使用浏览器的 AbortController 接口来终止请求。AbortController 是一个用于取消异步任务的控制器，它提供了一个 AbortSignal 对象，用于与异步任务进行通信。
以下是一个使用 AbortController 终止 axios 请求的示例代码：
import axios from 'axios';
const controller = new AbortController();
const signal = controller.signal;
axios.get('/api/users', { signal })
.then(response => {
console.log(response.data);
})
.catch(error => {
if (error.name === 'AbortError') {
console.log('请求被取消');
} else {
console.error(error);
}
});
// 在页面离开时取消请求
window.addEventListener('beforeunload', () => {
controller.abort();
});
上面的代码中，我们首先创建了一个 AbortController 对象 controller，然后使用 controller.signal 作为 signal 配置项传递给 axios 请求。在页面离开时，我们调用 controller.abort 方法取消请求。
当请求被取消
