無法在 React 中處理 net::ERR_CONNECTION_REFUSED

Question

我正在嘗試對 http://localhost:5000/run 的發布請求。 如果服務器未運行，則嘗試向客戶端拋出“請重試”。

try{
    const {data} = await axios.post("http://localhost:5000/run",payload);
    setOutput(data.output);
}
catch ({ response }) {
  if (response) {
    const errMsg = response.data.err.stderr;
    setOutput(errMsg);
  } else {
    setOutput("Please retry submitting.");
  }
}

當服務器運行時收到正確的錯誤，但在服務器脫機時沒有收到。 代碼中缺少什么？

Answer 1

請嘗試以下代碼：

import axios from "axios";
import {AxiosError} from 'axios';

    axios
        .post("http://localhost:5000/run", payload)
        .then((response) => setOutput(response.data.output))
        .catch((error) => {
            if (!error?.response) {
                setOutput("No Server Response");
            } else if (error?.code === AxiosError.ERR_NETWORK) {
                setOutput("Network Error");
            } else if (error.response?.status === 404) {
                setOutput("404 - Not Found");
            } else if (error?.code) {
                setOutput("Code: " + error.code);
            } else {
                setOutput("Unknown Error");
            }
        });

您可以使用axios.isAxiosError(error)來確保錯誤是 AxiosError 的類型。

Axios 錯誤類型：

static readonly ERR_FR_TOO_MANY_REDIRECTS = "ERR_FR_TOO_MANY_REDIRECTS";
static readonly ERR_BAD_OPTION_VALUE = "ERR_BAD_OPTION_VALUE";
static readonly ERR_BAD_OPTION = "ERR_BAD_OPTION";
static readonly ERR_NETWORK = "ERR_NETWORK";
static readonly ERR_DEPRECATED = "ERR_DEPRECATED";
static readonly ERR_BAD_RESPONSE = "ERR_BAD_RESPONSE";
static readonly ERR_BAD_REQUEST = "ERR_BAD_REQUEST";
static readonly ERR_CANCELED = "ERR_CANCELED";
static readonly ECONNABORTED = "ECONNABORTED";
static readonly ETIMEDOUT = "ETIMEDOUT";

Answer 2

您需要嘗試使用response.response.data.error在您的情況下顯示錯誤而不是response.data.err.stderr 。 所以在這里你從響應中得到錯誤數據：

try{
    const {data} = await axios.post("http://localhost:5000/run",payload);
    setOutput(data.output);
}
catch ({ response }) {
  if (response) {
    const errMsg = response.response.data.error;
    setOutput(errMsg);
  } else {
    setOutput("Please retry submitting.");
  }
}

參考討論here 。

Answer 3

感謝您的所有評論，這是最終有效的解決方案：

try {
  const {data} = await axios.post("http://localhost:5000/run", payload);
  setOutput(data.output);
} catch (error) {
  if (error.response.data) {
    setOutput(error.response.data.err.stderr);
  } else {
    setOutput("Error connecting to the server!");
  }
}