React Suspense如何实现fetch中止的卸载清理机制

React 18之后的Suspense本身不会在边界卸载、切换fallback时主动取消已经抛出的未完成Promise，所有中断逻辑需要业务层把资源请求的生命周期和Suspense边界的生命周期做绑定，核心实现分三步：

1. 封装带中止能力的Suspense资源层 #

首先给所有用于Suspense的异步资源（比如fetch请求）绑定独立的AbortController，同时维护请求缓存避免重复发请求，每个资源暴露统一的abort方法用于中断，同时加引用计数适配多组件共享同个请求的场景。

const resourceCache = new Map();

function createFetchResource(url, options = {}) {
  const cacheKey = `${url}_${JSON.stringify(options)}`;
  if (resourceCache.has(cacheKey)) {
    const cached = resourceCache.get(cacheKey);
    cached.refCount += 1;
    return cached;
  }

  const controller = new AbortController();
  let status = 'pending';
  let result;
  let error;
  let unregisterHandlers = [];

  const promise = fetch(url, { ...options, signal: controller.signal })
    .then(res => res.json())
    .then(data => {
      status = 'fulfilled';
      result = data;
    })
    .catch(err => {
      if (err.name !== 'AbortError') {
        status = 'rejected';
        error = err;
      }
    })
    .finally(() => {
      // 请求落定后执行所有取消注册逻辑
      unregisterHandlers.forEach(fn => fn());
      unregisterHandlers = [];
    });

  const resource = {
    refCount: 1,
    read() {
      if (status === 'pending') throw promise;
      if (status === 'rejected') throw error;
      return result;
    },
    addUnregister(fn) {
      unregisterHandlers.push(fn);
    },
    abort() {
      this.refCount -= 1;
      // 引用计数归0、且请求还在pending时才真正中断
      if (this.refCount === 0 && status === 'pending') {
        controller.abort();
        resourceCache.delete(cacheKey);
      }
    }
  };

  resourceCache.set(cacheKey, resource);
  return resource;
}

2. 封装支持自动中断的Suspense边界组件 #

通过Context收集子组件中所有待完成的Suspense资源，在边界组件卸载时统一触发所有资源的abort方法。

import { createContext, useContext, useEffect, useRef, Suspense } from 'react';

const AbortRegisterContext = createContext(null);

export function AbortableSuspense({ fallback, children }) {
  const abortFns = useRef(new Set());

  // 卸载时中断所有未完成请求
  useEffect(() => {
    return () => {
      abortFns.current.forEach(abort => abort());
      abortFns.current.clear();
    };
  }, []);

  const register = (abortFn) => {
    abortFns.current.add(abortFn);
    return () => abortFns.current.delete(abortFn);
  };

  return (
    <AbortRegisterContext.Provider value={register}>
      <Suspense fallback={fallback}>{children}</Suspense>
    </AbortRegisterContext.Provider>
  );
}

3. 封装资源读取Hook，自动绑定生命周期 #

封装专用Hook读取资源，在组件挂载/资源创建时自动把中断方法注册到最近的Suspense边界，资源完成或组件卸载时自动取消注册。

export function useSuspenseFetch(url, options) {
  const register = useContext(AbortRegisterContext);
  const resource = createFetchResource(url, options);

  useEffect(() => {
    if (!register) return;
    const unregister = register(() => resource.abort());
    resource.addUnregister(unregister);
    return unregister;
  }, [resource, register]);

  return resource.read();
}

关键注意事项 #

• 不要依赖React原生能力自动取消：目前所有稳定版React都没有内置Suspense Promise的取消逻辑，必须自行实现。
• 必须处理AbortError：主动中断抛出的AbortError不要透传给ErrorBoundary，否则会触发错误兜底页。
• 缓存必须和中断逻辑联动：请求被中断后要及时清除对应缓存，避免后续请求命中已失效的pending状态资源导致Suspense永久挂起。
• 共享资源必须加引用计数：同个请求被多个Suspense边界下的组件复用时，要等所有引用方都卸载/完成后再真正中断，避免误杀正在使用的请求。
• 路由场景直接套在路由出口即可：如果是路由级代码分割/数据请求，只需要把路由出口包裹在AbortableSuspense中，路由跳转导致旧组件树卸载时，旧页面所有未完成的请求都会被自动中断。

使用示例 #

function UserDetail({ id }) {
  // 请求未完成时会自动抛出Promise给上层AbortableSuspense
  const userInfo = useSuspenseFetch(`/api/users/${id}`);
  return <div>用户名：{userInfo.name}</div>;
}

function App() {
  return (
    <AbortableSuspense fallback={<div>加载中...</div>}>
      <UserDetail id="1001" />
    </AbortableSuspense>
  );
}

内容的提问来源于stack exchange，提问作者Mattia Manzo Manzati