ReactJS：初始fetch后在Bootstrap模态框发起二次fetch报错如何解决

一、Failed to fetch 报错修复 #

该报错本质是fetch请求无法正常完成触发的未捕获异常，按以下优先级排查：

• 确认后端服务运行状态：检查http://localhost:3002对应的后端服务是否正常启动，3002端口没有被占用、没有被本地防火墙拦截。
• 修复跨域配置：如果前端运行端口和后端3002端口不一致，需要在后端服务配置CORS跨域规则，允许前端域名的访问请求，否则浏览器会直接拦截请求触发该报错。
• 补充请求异常捕获逻辑：你现有的callApi没有做错误捕获，请求失败时会直接抛出未处理的Promise拒绝，导致页面崩溃，优化后的代码示例如下：

const callApi = async (url, options = {}) => {
  const defaultHeaders = {
    Accept: "application/json",
    ...options.headers
  };
  try {
    const response = await fetch("http://localhost:3002/api" + url, {
      ...options,
      headers: defaultHeaders
    });
    // 响应状态码异常时主动抛出错误
    if (!response.ok) throw new Error(`请求错误，状态码：${response.status}`);
    const data = await response.json();
    return data;
  } catch (err) {
    console.error("接口请求失败：", err);
    // 可在这里统一加全局错误提示逻辑
    throw err;
  }
};

• 核对接口配置：确认后端存在/sales对应的GET接口，请求路径、请求方法和参数配置和后端要求一致。

二、避免多余服务端请求的优化方案 #

你完全不用担心两次常规业务请求会造成服务器过载，该量级的请求对服务端没有任何压力，也不会影响组件渲染，如果要减少请求可以按以下方案实现：

• 复用本地已有数据：列表页已经拉取到全量的销售数据存在本地state中，点击编辑打开模态框时，直接根据记录ID从本地的销售数据数组中匹配对应单条数据渲染，不需要额外发送查询单条数据的请求，仅在编辑完成提交时发送一次更新请求即可，更新成功后直接修改本地state的对应数据刷新表格，不需要重新拉取全量列表。
• 如需请求单条数据可添加本地缓存：如果单条数据的字段比列表返回的字段多，必须单独请求的情况，可给单条查询接口加本地缓存，同一条ID的查询请求只发一次，后续打开模态框直接复用缓存结果，不会产生多余请求。
• 优化并发请求效率：列表页现有代码是串行请求销售数据和用户数据，可改为Promise.all并行请求，提升加载速度，示例代码如下：

useEffect(() => {
  const fetchData = async () => {
    try {
      const [salesRes, usersRes] = await Promise.all([
        api.sales.list(),
        api.users.list()
      ]);
      setSales(salesRes);
      setUsers(usersRes);
    } catch (err) {
      // 此处添加数据加载失败的用户提示
      console.error("数据加载失败：", err);
    }
  };
  fetchData();
}, []);

内容的提问来源于stack exchange，提问作者Diego F. Montealegre Silva