Fetch API：第一次取消后中止不起作用

Question

我正在使用 abortcontroller 取消自定义反应挂钩内的获取请求，如下所示：

useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;
    const fetchData = async () => {
      try {
        setState({ status: 'pending', data: null, error: null });
        const response = await fetch(url, {
          signal,
          ...options,
        });

        // if response is an HTTP error like 4XX 5XX
        if (!response.ok) {
          throw new Error(response.statusText);
        }
        // if response is 2XX
        const data = (await response.json()) as T;
        setState({ status: 'resolved', data, error: null });
      } catch (error) {
        setState({ status: 'rejected', data: null, error: error as Error });
      }
    };
    fetchData();
    return () => {
      controller.abort(); // abort!
    };
}, [url, options]);

点击查看CodeSandbox中的实时直播

当我尝试一个接一个地处理多个请求时，我可以看到它取消了我之前的所有请求，这是预期的，但是当我再次访问相同的请求时，它不会第二次取消。

我们可以在上面的屏幕截图中看到，当使用向上箭头从 ID 10 快速更改 ID 到 24 时，我们看到所有中间请求都已成功取消，但是当使用向下箭头向后移动时，这次所有中间请求都被命中并且没有被取消。