javascript - 通过 axios/Express 返回错误值到 React App
问题描述
我有一个handleSubmit
函数可以从后端获取数据,作为更大组件的一部分。当后端失败时,我想将错误信息发送到我的 redux 存储和/或本地组件,但我无法这样做。
该handleSubmit
函数看起来像这样(它使用了正确连接的 React 钩子。如果有用,可以发布完整的组件):
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
语句出现在我的服务器上,如果我更改状态代码,我的 Google Chrome 控制台前端的状态代码错误也会发生。
事实上,如果我转到网络选项卡,则会针对我的请求显示正确的错误信息。这是我提出错误请求的视频:
但是,当我尝试访问err.message
我的前端时,我无法这样做。我的 handleSubmit 函数的 try/catch 处理程序中的 err.message 只给了我Request failed with status code XXX
我究竟做错了什么?
解决方案
请参阅https://github.com/axios/axios#handling-errors
您可以使用err.response.data.message
, not来访问响应err.message
。
推荐阅读
- c# - 尝试根据 Jenkins 参数化构建选择更新 App.config 值
- php - 如何从 Rest API 访问 json
- python - Python Pytz 美国/太平洋时区问题
- windows - Windows 中的系统文件缓存使用 RAM 的哪一部分?
- scala - 使用 PowerMock 在 Scala 中模拟对象
- excel - 在两列中搜索重复的文本字符串并突出显示,excel
- aem - 用于组件的 Adobe AEM (Adobe Experience Manager) HTL2HTML
- c++ - C++ 非特化模板类型对象列表?
- json - Ruby Time#to_json 作为浮点数
- excel - VBA 宏创建 PPT 演示文稿