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

Question

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

handleSubmit 函数看起来像这样（它使用正确连接的 React 挂钩。如果有用，可以 post 完整组件）：

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 语句出现在我的服务器上，如果我更改状态代码，我的 [=39] 中前端的状态代码错误也会发生变化=] Chrome控制台。

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

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

我做错了什么？

Answer 1

在别处找到答案：https://github.com/axios/axios/issues/960

显然，要获取消息，您必须使用 err.response.data.message

简单地使用 "err" 只会给你一个错误的基本字符串表示。

Answer 2

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

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

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

Returning Error Values Through Axios/Express To React App

javascript

error-handling

middleware

express

reactjs