如何取消无用的HTTP请求
在开发前端应用时，我们经常会遇到需要取消HTTP请求的情况。比如文件上传过程中用户想取消上传，或者搜索框在用户连续输入时取消之前的搜索请求。取消无用的请求既能节省服务器资源，又能提升用户体验。
为什么要取消请求？
想象这样一个场景：用户上传一个大文件，上传到一半时发现选错了文件。如果不取消当前的上传请求，用户要么等待上传完成（浪费时间），要么关闭页面（体验不好）。最好的做法是立即取消当前请求，让用户重新选择文件。
下面介绍几种常用的取消请求方法。
1. 原生AJAX的abort方法
XMLHttpRequest提供了abort()方法来取消请求：
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
const url = "https://api.example.com/data";
// 初始化请求
xhr.open('GET', url);
// 监听取消事件
xhr.addEventListener('abort', function() {
console.log('请求已被取消');
});
// 发送请求
xhr.send();
// 在需要的时候取消请求
setTimeout(() => {
xhr.abort(); // 取消请求
console.log('取消后的状态码:', xhr.status); // 变为0
}, 100);当调用abort()后，请求会立即停止，status状态码会变成0。
2. Fetch API使用AbortController
Fetch API需要使用AbortController来取消请求：
// 创建AbortController实例
const controller = new AbortController();
const signal = controller.signal;
// 发起请求
fetch('https://api.example.com/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name: '张三', age: 25 }),
signal: signal // 关联信号量
})
.then(response => {
if (!response.ok) throw new Error('请求失败');
return response.json();
})
.then(data => {
console.log('提交成功:', data);
})
.catch(error => {
if (error.name === 'AbortError') {
console.log('请求已被取消');
} else {
console.error('请求错误:', error);
}
});
// 取消请求
setTimeout(() => {
controller.abort();
}, 1000);重要提示：一个AbortController只能使用一次。取消请求后，如果需要发起新的可取消请求，需要创建新的AbortController实例。
3. Axios使用AbortController（推荐）
Axios从0.22.0版本开始推荐使用AbortController：
// 创建控制器
const controller = new AbortController();
// 方法一：监听取消事件
controller.signal.addEventListener("abort", () => {
console.log("请求已取消");
});
// 方法二：使用try-catch
async function uploadFile() {
try {
const response = await axios.post('/api/upload', formData, {
signal: controller.signal
});
console.log('上传成功', response.data);
} catch (error) {
if (error.message === "canceled") {
console.log("请求已被取消");
} else {
console.error("上传错误:", error);
}
}
}
// 取消请求
controller.abort();4. Axios的CancelToken（旧版本）
0.22.0之前的Axios使用CancelToken，现在已不推荐使用：
import axios from "axios";
// 创建取消令牌
const source = axios.CancelToken.source();
try {
const response = await axios.post('/api/upload', formData, {
cancelToken: source.token
});
} catch (error) {
if (axios.isCancel(error)) {
console.log('请求已取消:', error.message);
}
}
// 取消请求
source.cancel('用户取消了操作');实际应用场景
场景1：搜索框防抖
let controller = null;
async function handleSearch(keyword) {
// 取消之前的请求
if (controller) {
controller.abort();
}
// 创建新的控制器
controller = new AbortController();
try {
const response = await fetch(`/api/search?q=${keyword}`, {
signal: controller.signal
});
const results = await response.json();
displayResults(results);
} catch (error) {
if (error.name !== 'AbortError') {
console.error('搜索错误:', error);
}
}
}
// 防抖处理
const debouncedSearch = debounce(handleSearch, 300);
searchInput.addEventListener('input', (e) => {
debouncedSearch(e.target.value);
});场景2：文件上传取消
class FileUploader {
constructor() {
this.controller = null;
}
async upload(file) {
// 取消正在进行的上传
if (this.controller) {
this.controller.abort();
}
this.controller = new AbortController();
const formData = new FormData();
formData.append('file', file);
try {
const response = await axios.post('/api/upload', formData, {
signal: this.controller.signal,
onUploadProgress: (progressEvent) => {
const percent = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
updateProgress(percent);
}
});
return response.data;
} catch (error) {
if (error.message !== 'canceled') {
throw error;
}
}
}
cancel() {
if (this.controller) {
this.controller.abort();
}
}
}场景3：页面切换取消请求
class PageRequestManager {
constructor() {
this.controllers = new Map();
}
addRequest(requestId, controller) {
this.controllers.set(requestId, controller);
}
cancelRequest(requestId) {
const controller = this.controllers.get(requestId);
if (controller) {
controller.abort();
this.controllers.delete(requestId);
}
}
cancelAll() {
for (const controller of this.controllers.values()) {
controller.abort();
}
this.controllers.clear();
}
}
// 在vue组件中使用
export default {
data() {
return {
requestManager: new PageRequestManager()
};
},
beforeUnmount() {
// 组件销毁时取消所有请求
this.requestManager.cancelAll();
},
methods: {
async loadData() {
const controller = new AbortController();
const requestId = 'user-data';
this.requestManager.addRequest(requestId, controller);
try {
const response = await axios.get('/api/user', {
signal: controller.signal
});
this.userData = response.data;
} catch (error) {
if (error.message !== 'canceled') {
this.handleError(error);
}
} finally {
this.requestManager.cancelRequest(requestId);
}
}
}
};注意事项
错误处理：取消请求会触发错误，需要正确区分是取消错误还是其他错误。
状态清理：取消请求后要及时清理相关状态，比如上传进度、加载状态等。
用户体验：给用户明确的反馈，比如显示"已取消"的提示。
内存管理：及时移除事件监听器，避免内存泄漏。
最佳实践
统一管理所有可取消的请求
在组件销毁时自动取消相关请求
为用户提供明确的取消反馈
在合适的场景使用取消功能，不要过度使用
取消HTTP请求是一个很实用的功能，正确使用可以显著提升应用性能和用户体验。希望这些示例能帮助你在实际项目中更好地应用这个功能。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
