如何将Node.js Axios请求错误信息从服务端发送至客户端并使用

1. 代理服务器端返回Axios错误信息 #

你的代理服务器代码仅处理了目标服务器返回错误响应的场景，若遇到网络故障、请求超时或配置错误等情况，会因未发送响应导致客户端（如Postman）一直处于"sending request"状态。需完善错误处理逻辑，确保所有错误场景都能返回结构化的JSON错误信息：

修改后的server.js代码：

app.get("/list/:id", function (req, res) {
  const { id } = req.params;
  axios
    .get(`${BASE_URL}/list/` + id)
    .then((response) => {
      res.send(response.data);
    })
    .catch((error) => {
      // 分场景处理Axios错误
      if (error.response) {
        // 目标服务器返回错误响应（如4xx、5xx）
        res.status(error.response.status).json({
          error: error.response.data,
          statusCode: error.response.status,
          message: "目标服务器返回错误"
        });
      } else if (error.request) {
        // 请求已发送但未收到响应（如超时、网络断开）
        res.status(504).json({
          error: "请求超时或目标服务器无响应",
          message: "无法获取目标服务器数据"
        });
      } else {
        // 请求配置错误或其他未知错误
        res.status(500).json({
          error: error.message,
          message: "请求配置异常"
        });
      }
    });
});

关键改进：

• 覆盖所有Axios错误类型：error.response、error.request、通用错误
• 为每种错误匹配对应HTTP状态码（如504表示网关超时）
• 返回结构化JSON，便于客户端解析

2. 客户端使用错误信息 #

客户端需在catch块中区分不同错误类型，提取服务器返回的错误信息，而非仅打印整个错误对象：

修改后的客户端代码：

const getList = () => {
  axios
    .get("http://localhost:8000/list", {
      params: {
        id: '4'
      }
    })
    .then((resp) => {
      console.log("请求成功:", resp.data);
      // 处理成功数据，如更新UI
    })
    .catch((err) => {
      if (err.response) {
        // 服务器返回错误响应
        console.error("服务器错误详情:", err.response.data);
        console.error("状态码:", err.response.status);
        // 可在此处将错误信息展示给用户，如弹窗提示
      } else if (err.request) {
        // 请求发送后无响应
        console.error("网络异常:", "请求未收到响应，请检查网络或服务器状态");
      } else {
        // 请求配置错误
        console.error("请求错误:", err.message);
      }
    });
};

使用说明：

• 通过err.response判断服务器返回的错误，直接提取err.response.data获取自定义错误内容
• 针对网络类错误，给出用户易懂的提示
• 可将错误信息整合到前端UI中，提升用户体验

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