对已resolve的fetch调用AbortController.abort()是否存在隐患

开发React应用时需要实现交互触发的串行fetch请求逻辑：每次发起新请求时，自动中止此前尚未完成的旧请求。
基于该需求编写了自定义Hook useData，核心逻辑为入参dataUrl变化时触发useEffect执行，计划借助useEffect的清理函数调用abort()中止旧请求。但注意到清理函数执行时会对所有历史关联的AbortController调用abort()，覆盖范围包含已经完成的请求，而非仅中止未完成的请求。
需要确认该实现是否存在隐藏问题：主观判断对已经resolve的fetch调用abort()不会产生额外负面影响，但未找到官方依据，对应实现代码如下：

/** Returns data for a given url. */
export const useData = function (dataUrl) {
  const [loadedData, setLoadedData] = useState(Object.assign({}));

  // runs if/when the url changes
  useEffect(() => {
    // new controller for each new url
    const controller = new AbortController();
    
    async function getData(dataUrl) {
      if (!dataUrl) return;

      // load data & set state
      try {
        const data = await fetch(dataUrl, {
          signal: controller.signal,
        });
        setLoadedData(data);
      } catch (e) {
        console.error(`useData failed for url ${dataUrl}\n${e}.`);
      }
    }

    getData(dataUrl);

    // clean up the last request before running 
    // useEffect for on the next url
    return () => {
      controller.abort();
    };

  }, [dataUrl]);

  // return data in the hook's state, set by useEffect
  return loadedData;
};

你的判断完全正确，对已经完成的fetch请求关联的AbortController调用abort()没有任何负面影响，这段代码的核心实现逻辑是安全可行的。

核心依据 #

• 按照Web标准中AbortController的定义，abort()方法执行时会先检查关联signal的状态：如果signal已经被标记为中止，方法会直接静默返回，不执行任何额外操作；只有当signal处于未触发状态时，才会将其标记为已中止，触发绑定的abort事件，终止所有关联的未完成异步操作。
• 当fetch请求已经完成（无论成功返回响应还是因其他原因失败），浏览器底层会自动解除该请求和对应signal的绑定，此时调用abort()既不会抛出异常，也不会篡改已经拿到的响应数据，更不会影响已经执行完成的状态更新操作。

可优化点 #

• 主动调用abort()触发的请求失败属于预期内的正常逻辑，不应该作为异常打印，可以在catch块中过滤这类场景，避免控制台出现无意义的报错：

catch (e) {
  // 过滤主动中止请求产生的错误
  if (e.name !== 'AbortError') {
    console.error(`useData failed for url ${dataUrl}\n${e}.`);
  }
}

• 当前代码直接将fetch返回的Response原始对象存入组件状态，实际业务使用时一般需要先调用Response.json()、Response.text()等方法解析出实际的业务数据再存入状态，避免后续重复消费响应体时出现问题。

内容的提问来源于stack exchange，提问作者ebbishop