React使用useEffect处理链式fetch请求的方案咨询

原始嵌套写法的核心问题 #

你最开始的嵌套Promise写法存在几个典型问题：

• 回调层级过深形成回调地狱，代码可读性、可维护性差
• Token获取逻辑和业务请求强耦合，多组件复用时需要重复编写完全相同的鉴权逻辑
• 没有统一的错误处理、状态管理入口，后续如果要调整鉴权规则（比如修改token传参方式、增加token过期刷新逻辑），需要修改所有业务请求代码，维护成本极高

你当前Context+useEffect方案的待改进点 #

你尝试抽离公共逻辑的思路是对的，但现有实现存在不少逻辑漏洞：

• fetchToken虽然标记为async，但内部既没有await也没有返回Promise，外部调用时无法感知token拉取的成功/失败状态
• 用initFetch布尔值作为请求触发标记存在逻辑缺陷：第一次请求完成后如果不把initFetch重置为false，后续token更新时会意外触发重复请求；如果重置时机不对，还可能出现请求漏发
• 缺少竞态处理逻辑：用户连续多次触发提交时，后发的请求可能比先发的请求早返回，导致旧数据覆盖新数据
• 没有统一的错误捕获，拉取token或业务数据失败时会直接抛出未捕获的Promise错误，没有降级处理空间
• Token拉取时机不合理：等用户触发提交时才判断token是否存在，会额外增加用户等待时间；多组件同时触发请求时还可能重复发起多次token拉取请求
• fetchData中拿到数据后直接return data没有实际作用，因为这个返回值不会被外层接收，你根本拿不到请求结果
• 没有主动触发fetchToken的逻辑：代码里只是解构了方法但从未调用，初始状态下token始终为空，请求永远无法正常发出

改进实现方案 #

核心思路是把所有鉴权相关的逻辑完全收敛到Context层，业务组件不需要感知token的存在，直接调用封装好的请求方法即可。

Context层实现（request-context.jsx） #

import { createContext, useState, useCallback, useRef, useContext } from 'react';

const RequestContext = createContext({
  token: '',
  fetchToken: () => Promise.resolve(''),
  requestWithAuth: () => Promise.resolve()
});

export const RequestProvider = ({ children }) => {
  const [token, setToken] = useState('');
  // 用ref缓存正在执行的token请求，避免重复发起
  const tokenRequestRef = useRef(null);

  const fetchToken = useCallback(async () => {
    // 已有有效token直接返回
    if (token) return token;
    // 已有正在执行的token请求，直接复用该Promise
    if (tokenRequestRef.current) return tokenRequestRef.current;

    // 发起token请求
    tokenRequestRef.current = fetch("[GET THE TOKEN]")
      .then(res => {
        if (!res.ok) throw new Error('获取访问凭证失败');
        return res.json();
      })
      .then(data => {
        setToken(data);
        tokenRequestRef.current = null;
        return data;
      })
      .catch(err => {
        tokenRequestRef.current = null;
        throw err;
      });

    return tokenRequestRef.current;
  }, [token]);

  // 封装统一的带鉴权请求方法，业务组件直接调用这个方法即可
  const requestWithAuth = useCallback(async (url, options = {}) => {
    // 自动等待有效token拉取完成
    const validToken = await fetchToken();
    // 自动拼接token参数
    const requestUrl = new URL(url);
    requestUrl.searchParams.set('token', validToken);
    
    const res = await fetch(requestUrl, options);
    if (!res.ok) throw new Error('请求失败，请稍后重试');
    return res.json();
  }, [fetchToken]);

  return (
    <RequestContext.Provider value={{ token, fetchToken, requestWithAuth }}>
      {children}
    </RequestContext.Provider>
  );
};

// 封装自定义hook简化调用
export const useAuthRequest = () => useContext(RequestContext);

记得在应用根组件外层包裹RequestProvider，保证全局可以拿到Context。

业务组件层实现（component.jsx） #

组件层不需要再维护token相关的判断逻辑，只需要处理自身的业务状态即可：

import { useState, useRef, useEffect } from 'react';
import { useAuthRequest } from './request-context.jsx';

export default function BusinessForm() {
  const { requestWithAuth } = useAuthRequest();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  // 用于竞态处理、取消请求的控制器
  const abortControllerRef = useRef(null);

  const submitForm = async () => {
    // 取消上一个未完成的请求
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }
    const controller = new AbortController();
    abortControllerRef.current = controller;

    setLoading(true);
    setError(null);
    try {
      const res = await requestWithAuth("[GET DATA]", {
        signal: controller.signal
      });
      // 只有当前请求未被取消时才更新状态
      if (!controller.signal.aborted) {
        setData(res);
      }
    } catch (err) {
      if (err.name !== 'AbortError') {
        setError(err.message);
      }
    } finally {
      if (!controller.signal.aborted) {
        setLoading(false);
      }
    }
  };

  // 组件卸载时取消未完成的请求，避免内存泄漏
  useEffect(() => {
    return () => {
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
    };
  }, []);

  return (
    <div>
      <button onClick={submitForm} disabled={loading}>
        {loading ? '提交中...' : '提交表单'}
      </button>
      {error && <p className="error-tip">{error}</p>}
      {data && <div className="data-container">{/* 渲染业务数据 */}</div>}
    </div>
  );
}

方案优势 #

• 鉴权逻辑完全收敛，业务代码零重复：所有需要带token的请求直接调用requestWithAuth即可，不需要关心token怎么获取、怎么拼接
• 解决了重复拉取token的问题：全局同一时间最多只有一个token请求在执行，拿到token后自动缓存，减少不必要的请求
• 去掉了不稳定的布尔值触发标记，请求触发逻辑和用户操作直接绑定，不会出现意外的重复请求或漏发
• 内置竞态处理和内存泄漏防护：连续提交、组件卸载时自动取消未完成的请求，不会出现状态更新报错、旧数据覆盖新数据的问题
• 扩展成本极低：后续需要加token过期自动刷新、统一请求头、全局请求日志、统一loading状态等能力时，只需要修改Context层的封装代码，所有业务请求自动生效，不需要修改业务组件代码
• 技术栈无关：后续如果要把fetch换成axios或其他请求库，只需要修改Context内的实现，业务层代码完全不需要调整

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