我们在处理前后端交互的过程中，有时需要仔细斟酌接口的请求时机（例：频繁的Tab切换、树节点切换、数据录入时，请求什么时候发？）或接口返回数据的处理时机（例：接口还没返回时就要切换路由，路由都切换走了，之前请求的数据怎么办？），避免一些无用的请求或者接口返回顺序的差异（例如：同一个按钮点了多次，如果后点的先返回，先点的后返回，怎么办？）。
常见的处理方式有：
加防抖：控制请求时机。对于频繁操作，只在最后一次动作时，发出请求。
锁状态：控制请求时机。直接禁止很频繁的操作，必须一个接一个。
取消请求：控制请求处理时机。取消之前没返回的请求，不再处理了。
AbortController
AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。
我们先使用 AbortController() 构造函数创建一个控制器，然后使用 AbortController.signal 属性获取其关联 AbortSignal 对象的引用。
当 fetch 请求初始化时，我们将 AbortSignal 作为一个选项传递进入请求的选项对象中（下面的 {signal}）。这将 signal 和 controller 与 fetch 请求相关联，并且允许我们通过调用 AbortController.abort() 去中止它。
const controller = new AbortController();
fetch('/foo/bar', {
signal: controller.signal
}).then(function(response) {
//...
});
// 取消请求
controller.abort()当 abort() 被调用时，这个 fetch() promise 将 reject 一个名为 AbortError 的 DOMException。
Axios
Axios 也支持以 fetch API 方式通过 AbortController 取消请求：
const controller = new AbortController();
axios.get('/foo/bar', {
signal: controller.signal
}).then(function(response) {
//...
});
// 取消请求
controller.abort()使用 Axios 您还可以使用 cancel token 取消一个请求。
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');AJAX
AJAX 正在逐渐被 JavaScript 框架中的函数和官方的 Fetch API 标准取代。如果该请求已被发出，XMLHttpRequest.abort() 方法将终止该请求。当一个请求被终止，它的 readyState 将被置为 XMLHttpRequest.UNSENT (0)，并且请求的 status 置为 0。
var xhr = new XMLHttpRequest(),
method = "GET",
url = "https://developer.mozilla.org/";
xhr.open(method, url, true);
xhr.send();
if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
xhr.abort();
}Axios 内部也提供了对 AbortController 的兼容处理。
const controller = new AbortController();
const signal = controller.signal
signal.addEventListener('abort', () => {
console.log('事件监听器')
})
const xhr = new XMLHttpRequest(),
method = "GET",
url = "https://developer.mozilla.org/";
xhr.open(method, url, true);
xhr.send();
if (signal.aborted) {
console.log('请求被终止');
} else {
controller.abort().
xhr.abort();
}属性 aborted一个 Boolean，表示与之通信的请求是否被终止（true）或未终止（false）。
当使用 addEventListener() 或将事件监听器分配给该接口的 onabort 属性，请求被中止时调用。
