React中axios请求无法捕获net::ERR_CONNECTION_REFUSED错误

你的现有逻辑存在两处明显缺陷，直接导致服务端离线时无法触发预期提示：

• 错误捕获写法不安全：直接在catch参数里解构response属性，当服务端未启动、网络断开、连接被拒绝、跨域预检失败时，请求根本拿不到服务端的响应，axios抛出的错误对象上不存在response字段，此时直接解构如果遇到非标准的错误对象（比如拦截器抛出的null/undefined值），会直接抛出TypeError，导致整个catch块的代码中断，根本走不到你写的else分支。
• 属性访问没有做容错：即使response字段存在，如果服务端返回的错误结构和你预期不符（比如网关返回502/503错误、反向代理返回的错误没有data.err路径），你写的response.data.err.stderr会因为访问不存在的属性抛出新的异常，同样会中断错误处理流程。

调整错误处理逻辑，先拿到完整的错误对象，分场景判断，同时加上属性访问的安全防护，建议补充超时配置避免请求无限挂起：

try{
    const {data} = await axios.post("http://localhost:5000/run", payload, {
        // 10秒超时，避免网络异常时请求一直处于pending状态
        timeout: 10000
    });
    setOutput(data.output);
}
catch (err) {
  // 场景1：服务端返回了非2xx状态码的响应
  if (err.response) {
    // 可选链兜底，避免返回结构不符时抛出新错误
    const errMsg = err.response?.data?.err?.stderr || "服务端处理请求异常，请重试";
    setOutput(errMsg);
  } 
  // 场景2：请求已发出，但没有收到任何响应（服务端离线、断网、超时、跨域拦截都属于这类）
  else if (err.request) {
    setOutput("请重试");
  }
  // 场景3：请求根本没发出去（比如参数格式错误、axios配置异常）
  else {
    setOutput("请求发送失败，请重试");
  }
}

• 本地开发前后端端口不一致时，要确保服务端配置了正确的CORS跨域允许规则，否则跨域请求被浏览器拦截时也会走到无响应的错误分支
• 如果你给axios配置了全局请求/响应拦截器，要确保拦截器出错时抛出的是标准Error对象，不要抛出undefined、null或者原始类型值，否则会导致错误判断逻辑失效

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