今日所学 ·

用 AbortController 取消过期请求

当搜索词或筛选条件快速变化时,只忽略旧响应还不够:浏览器仍然在传输和解析已经没有价值的数据。

基本做法

  1. 为当前请求创建一个 controller。
  2. signal 传给支持取消的 API。
  3. 新请求开始或组件卸载时调用 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,不要把主动取消显示成请求失败。