React应用中异步Fetch请求被忽略问题排查求助

核心问题：错误的Promise使用方式 #

你在fetchOtherStuff里犯了一个常见的异步编程错误——在new Promise的执行器（executor）函数前加了async关键字。

async函数本身会返回一个Promise，当你把async函数作为Promise的executor时，它内部的异常会被自己的Promise捕获，而不会传递给外层手动创建的Promise。这就导致：

1. 如果fetch请求出现异常（比如CORS错误、网络超时、URL无效等），错误会被吞掉，既不会触发reject(error)，也不会进入外层的catch；
2. 整个fetchOtherStuff返回的Promise会一直处于pending状态，永远不会resolve或reject，所以await fetchOtherStuff()之后的代码完全不会执行，看起来就像请求被“忽略”了。

另外，async函数本身就自带Promise包装，完全不需要手动new Promise，这属于冗余写法。

修复代码 #

把fetchOtherStuff改成下面这样，去掉多余的Promise包裹：

const fetchOtherStuff = async () =>{
  try {
    console.log("THIS WILL LOG")
    const orgCodes = await fetch(`https://endpoint-whatever.com`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json"
      },
      credentials: 'include'
    }); 
    // 额外补充：fetch仅在网络错误时抛异常，4xx/5xx状态不会主动报错，需要手动判断
    if (!orgCodes.ok) {
      throw new Error(`请求失败！状态码: ${orgCodes.status}`);
    }
    const result = await orgCodes.json();
    console.log("NOW THIS WILL LOG ", result)
    setDomainNotReadyCodes(result)
    return result             
  } catch (error) {
    console.error("fetchOtherStuff出错:", error)
    throw error
  }
}

额外排查点 #

如果修复后还是有问题，检查以下几点：

• 确认目标接口的CORS配置允许当前域名访问，且设置了Access-Control-Allow-Credentials: true（因为你用了credentials: 'include'）；
• 检查浏览器是否有广告拦截、隐私类插件，这类插件可能会静默拦截请求；
• 打开Chrome控制台的Console面板，勾选「启用控制台严格模式」和「记录XMLHttpRequests」，同时在Sources面板开启「在未捕获的异常处暂停」，排查是否有隐藏的未捕获异常；
• 确认请求URL完全正确，没有拼写错误或环境差异（比如开发/生产环境URL不一致）。

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