React 中的 Fetch “ECONNREFUSED” 错误处理：减少控制台错误日志

2024-03-15 01:06:22

在 React 中处理 Fetch 中的“ECONNREFUSED”错误

前言

在 React 应用程序中使用 Fetch 时，经常会出现“Error connection refused”错误，尤其是当目标 PC 上未运行必要的客户端时。虽然这在预期之内，但频繁的错误日志会导致控制台混乱，分散注意力。本文将探讨改进错误处理，减少错误日志的最佳实践。

了解“ECONNREFUSED”错误

“ECONNREFUSED”错误表明客户端无法连接到目标服务器。在 React 中使用 Fetch 时，这通常是由于目标 PC 上未运行必要的软件（例如 Avaya One-X 客户端）。每次客户端未运行时，Fetch 都会尝试连接，导致控制台中充斥着错误。

错误处理

为了减少错误日志，需要在 Fetch 请求中添加错误处理。使用try-catch块捕获“ECONNREFUSED”错误，并提供自定义错误处理。

自定义错误处理函数

创建一个自定义的错误处理函数，该函数针对“ECONNREFUSED”错误提供特定的消息。这将有助于区分其他类型的错误，并提供更友好的错误信息。

在 Fetch 中使用错误处理函数

将自定义错误处理函数作为 Fetch 请求catch块的参数。这将确保在发生“ECONNREFUSED”错误时调用该函数。

代码示例

以下是使用上述步骤更新后的代码示例：

const handleFetchError = (error) => {
  if (error.code === "ECONNREFUSED") {
    console.warn("连接被拒绝，请确保 Avaya One-X 客户端正在运行。");
  } else {
    console.error("未知错误：", error);
  }
};

fetch(url)
  .then((r) => r.text())
  .then((text) => {
    res(text);
  })
  .catch(handleFetchError);