javascript - 通过 Axios/Express 返回错误值到 React App

Question

我有一个 handleSubmit 函数，它作为更大组件的一部分从我的后端获取数据。我想在后端失败时将错误信息发送到我的 redux 存储和/或本地组件，但我无法这样做。

handleSubmit 函数如下所示(它使用正确连接的 React Hook 。如果有用，可以发布完整的组件):

const handleSubmit = async (e, { dataSource, filter, filterTarget }) => {

    e.preventDefault();
    setIsLoading(true);
    setErrorValue(null);
    setError(false);

    const token = localStorage.JWT_TOKEN;
    const link = filterTarget === "Identifier" ? `http://localhost:8081/api/${dataSource}/${filter}`: `http://localhost:8081/api/${dataSource}?filter=${filter}&filterTarget=${filterTarget}`;

    try {
        let data = await axios.get(link, { headers: { authorization: token }});
        props.setData(data);
        setError(false);
        setIsLoading(false);
    } catch (err){           
        setErrorValue(err.message);
        setError(true);
        setIsLoading(false);
    };
};

我故意通过表单提出错误的请求，这将在我的后端触发错误。这些是通过我的自定义 Express 中间件函数处理的，它看起来像这样(一旦我让这个框架工作，我将添加更多):

  handleOtherError: (error, req, res, next) => { // Final custom error handler, with no conditions. No need to call next() here.
      console.log("This error handler is firing!");
      return res.status(500).json({ 
          message: error.message,
          type: "ServerError"
      });
    }

我知道这个函数正在触发，因为 console.log 语句出现在我的服务器上，如果我更改状态代码，我的前端的状态代码错误也会发生变化谷歌浏览器控制台。

事实上，如果我转到网络选项卡，则会为我的请求显示正确的错误信息。这是我提出错误请求的视频:

但是，当我尝试在我的前端访问 err.message 时，我无法这样做。我的 handleSubmit 函数的 try/catch 处理程序中的 err.message 只给我 Request failed with status code XXX

我做错了什么？

Answer 1

参见 https://github.com/axios/axios#handling-errors

您可以使用 err.response.data.message 而不是 err.message 访问响应。