# 如何取消请求的发送
Issue
欢迎在 Issue 中交流与讨论: Issue 502 (opens new window)
Author
# 001 XHR 使用 xhr.abort()
const xhr = new XMLHttpRequest(),
method = "GET",
url = "https://developer.mozilla.org/";
xhr.open(method, url, true);
xhr.send();
// 取消发送请求
xhr.abort();
# 002 fetch 使用 AbortController
AbortController文档见 AbortSignal - MDN (opens new window)，它不仅可以取消 Fetch 请求发送，同样也可以取消事件的监听(通过addEventListener的第三个参数signal控制)
- 发送请求时使用一个
signal选项控制 fetch 请求 control.abort()用以取消请求发送- 取消请求发送之后会得到异常
AbortError
const controller = new AbortController()
const signal = controller.signal
const downloadBtn = document.querySelector('.download');
const abortBtn = document.querySelector('.abort');
downloadBtn.addEventListener('click', fetchVideo);
// 点击取消按钮时，取消请求的发送
abortBtn.addEventListener('click', function() {
controller.abort();
console.log('Download aborted');
});
function fetchVideo() {
...
fetch(url, {signal}).then(function(response) {
...
}).catch(function(e) {
// 请求被取消之后将会得到一个 AbortError
reports.textContent = 'Download error: ' + e.message;
})
}
# 003 Axios: xhr 与 http/https
Axios 中通过 cancelToken 取消请求发送
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 {
// handle error
}
});
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
而其中的原理可分为两部分
- 浏览器端: 基于 XHR，
xhr.abort()，见源码axios/lib/adapters/xhr.js (opens new window) - Node端: 基于 http/https/follow-redirects，使用
request.abort()，见源码axios/lib/adapters/http.js (opens new window)