在 javascript 中取消数据预编码请求（如 fetch api 的 get 请求或 axios 的请求），核心方法是使用 abortcontroller。通过创建一个控制器实例，将其 signal 属性传递给请求配置，并在需要时调用控制器的 abort() 方法，即可中断正在进行的网络请求并抛出错误。
Fetch API 如何中断请求
Ffetch API 原生支持 AbortController。只需实例化控制器，将 signal 传入 fetch 的第二个参数对象中，当调用 controller.abort() 时，对应的 Promise 会立即被拒绝，抛出 AbortError。
const controller = new AbortController();
const signal = controller.signal;
// 发起请求
fetch('https://api.example.com/data', { signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
if (error.name === 'AbortError') {
console.log('请求已取消');
} else {
console.error('请求失败:', error);
}
});
// 在某个条件触发时取消请求
setTimeout(() => {
controller.abort();
}, 5000); // 5秒后自动取消上述代码展示了标准的 Fetch 取消流程。输入为 URL 和信号，实际结果是请求在 5 秒后被终止，catch 块捕获到 AbortError。如果请求在 5 秒前完成，则正常处理数据，不会触发取消逻辑。
立即学习“Java免费学习笔记（深入）”；
Axios 如何中断请求
Axios 库同样深度集成了 AbortController。在 Axios 的配置对象中设置 signal 属性，行为与 Fetch 类似。Axios 会在请求被取消时抛出带有 code: 'ERR_CANCELED' 的错误对象，便于区分普通网络错误和主动取消。
import axios from 'axios';
const controller = new AbortController();
// 发起 Axios 请求
axios.get('https://api.example.com/data', {
signal: controller.signal
})
.then(response => console.log(response.data))
.catch(error => {
if (axios.isCancel(error)) {
console.log('请求已取消');
} else {
console.error('请求失败:', error);
}
});
// 取消请求
controller.abort();这段代码演示了 Axios 中的取消操作。输入是 Axios 实例和信号，实际结果是请求被立即中止。通过 axios.isCancel() 可以准确判断是否为取消操作导致的异常，从而执行特定的清理逻辑，如重置 UI 状态或释放资源。
如何处理取消后的资源清理
当请求被取消后，除了停止网络传输，通常还需要清理相关的本地状态。例如，在 React 组件中，需要在组件卸载或依赖项变化时确保取消未完成的请求，以防止内存泄漏或更新已卸载组件的状态。
import { useEffect, useState } from 'react';
import axios from 'axios';
function DataComponent() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
const controller = new AbortController();
const fetchData = async () => {
setLoading(true);
try {
const response = await axios.get('/api/data', {
signal: controller.signal
});
setData(response.data);
} catch (error) {
if (!axios.isCancel(error)) {
console.error('Failed to fetch data', error);
}
} finally {
setLoading(false);
}
};
fetchData();
// 清理函数：组件卸载时取消请求
return () => {
controller.abort();
};
}, []);
return <div>{loading ? 'Loading...' : JSON.stringify(data)}</div>;
}该示例展示了在 React 中使用 useEffect 管理请求生命周期。输入是组件挂载事件，实际结果是在组件卸载时自动取消请求。清理函数返回 controller.abort() 调用，确保即使请求尚未完成，也能被安全终止，避免对已卸载组件调用 setData 导致的警告或错误。
