今日所学 ·
用 AbortController 取消过期请求
当搜索词或筛选条件快速变化时,只忽略旧响应还不够:浏览器仍然在传输和解析已经没有价值的数据。
基本做法
- 为当前请求创建一个 controller。
- 把
signal传给支持取消的 API。 - 新请求开始或组件卸载时调用
abort()。
const [result, setResult] = useState<unknown>(null);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
const controller = new AbortController();
const load = async () => {
try {
const response = await fetch(url, { signal: controller.signal });
const data = await response.json();
setResult(data);
} catch (cause) {
if (cause instanceof DOMException && cause.name === "AbortError") {
return;
}
setError(cause instanceof Error ? cause : new Error("请求失败"));
}
};
void load();
return () => controller.abort();
}, [url]);
取消不是错误恢复策略。它表达的是:这项工作已经不再需要完成。
实际使用时,应单独识别 AbortError,不要把主动取消显示成请求失败。