React中<img/>标签被替换时如何取消图片下载请求？

这个场景我之前也遇到过——频繁切换图片时，旧的请求还在后台偷偷下载，既浪费带宽又占资源，确实头疼！好在现代浏览器提供了可以直接解决这个问题的API，下面给你两个可行的方案，亲测有效：

方案一：用AbortController中断请求（推荐） #

这是最直接可靠的方法，现代浏览器都支持AbortController API，它能让我们主动终止已经发起的HTTP请求。在React里，我们可以用useRef来保存控制器实例，每次生成新图片前，先终止上一次的请求，再发起新的。

具体实现思路：

• 用useRef存储AbortController实例，避免组件重新渲染时丢失引用
• 每次加载新图片前，调用上一个控制器的abort()方法中断旧请求
• 创建新的控制器，用fetch请求图片资源并绑定控制器的signal
• 将获取到的图片转成object URL，赋值给img的src
• 组件卸载时清理定时器、中断请求，同时释放object URL防止内存泄漏

代码示例：

import { useState, useRef, useEffect } from 'react';

function AutoSwitchImage() {
  const [imageSrc, setImageSrc] = useState('');
  const abortControllerRef = useRef(null);

  useEffect(() => {
    const loadNewImage = () => {
      // 终止上一次的请求
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }

      // 创建新的请求控制器
      const controller = new AbortController();
      abortControllerRef.current = controller;

      // 生成随机图片URL
      const randomImageUrl = `https://your-image-domain.com/random?${Math.random()}`;

      // 用fetch请求图片，绑定signal
      fetch(randomImageUrl, { signal: controller.signal })
        .then(res => {
          if (!res.ok) throw new Error('Image request failed');
          return res.blob();
        })
        .then(blob => {
          // 转成object URL赋值给img
          const objectUrl = URL.createObjectURL(blob);
          setImageSrc(objectUrl);
          // 组件卸载时释放这个URL
          return () => URL.revokeObjectURL(objectUrl);
        })
        .catch(err => {
          // 忽略中断请求的错误，这是预期行为
          if (err.name !== 'AbortError') {
            console.error('Failed to load image:', err);
          }
        });
    };

    // 每秒触发一次图片切换
    const intervalId = setInterval(loadNewImage, 1000);

    // 清理函数：组件卸载或effect重新执行时触发
    return () => {
      clearInterval(intervalId);
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
    };
  }, []);

  return <img src={imageSrc} alt="Auto-switching random image" />;
}

方案二：直接操作img元素的加载（简化版） #

如果你不想用fetch，也可以通过img元素的decode()方法配合状态管理来控制，但这种方式无法直接中断已经发起的请求，只能在新图片加载完成后替换旧的。你可以结合useRef获取旧img元素，将其src设置为1x1透明像素的占位图——虽然不能完全中断请求，但能让浏览器尽快终止无用的加载（效果不如AbortController好，但聊胜于无）。

不过还是更推荐第一种方案，因为它能从根源上中断请求，彻底避免无用下载。

注意事项 #

• AbortError是中断请求时的正常错误，不用当成异常处理，判断错误名称过滤掉即可
• 每次生成的object URL要记得在组件卸载或切换图片时释放，防止内存泄漏
• 如果你需要兼容非常老的浏览器（比如IE），可以用axios的取消请求机制替代，但现在主流浏览器都支持AbortController了，一般不用考虑

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