Javascript http请求发送时如何在react js中显示错误消息？

您能告诉我当http请求发送时如何在react js中显示错误消息吗

我在我发送

400

状态和

错误消息的nodejs中提供服务。我想在
frontend
上显示此错误消息

app.get('/a',(req,res)=>{
    res.status(400).send({message:" some reason error message"})
})

现在我想在前端显示此错误消息。
在catch上，我将不会收到此消息。

try {
            const r = await axios.get('http://localhost:3002/a');
} catch (e) {
            console.log('===============================================')
            console.log(e)
            console.log(e.data)
            hideLoading();
            setErrorMessage(e.message);
            showErrorPopUp();
        }

捕获时
我将不会收到此消息。进入
错误堆栈
[！[在此处输入图像描述][1][1]

在这种情况下，最好从服务器使用JSON进行响应：

app.get('/a',(req,res) => {
    res.status(400).json({message:"some reason error message"})
})

因此，在客户端，您可以轻松地读取
error.response

try {
  const r = await axios.get('http://localhost:3002/a');
} catch (e) {
  if (e.response && e.response.data) {
    console.log(e.response.data.message) // some reason error message
  }
}

了解更多有关处理axios捕获错误的信息这是一个非常主观的问题。您可能需要使用一些中间件以更好的方式处理异步操作，如redux saga或redux thunk

方法是在存储中定义错误状态。并且，当您收到一个错误时，更新状态，调度一个操作

而且，在组件（容器）中，您需要一个观察者来获取更新的错误状态

try {
  const r = await axios.get('http://localhost:3002/a');
} catch (e) {
  if (e.response && e.response.data) {
    // Dispatch an action here
    console.log(e.response.data.message) // some reason error message
  }
}

作为参考，有一个非常基本和良好的教程丹。
Axios在请求配置中有validateStatus，您可以在其中列出您的状态


//
validateStatus
定义是解决还是拒绝承诺
对于给定的//HTTP响应状态代码。如果
validateStatus
返回
true
（或设置为
null
//或
undefined
）承诺
将得到解决；否则，该承诺将被拒绝

axios
.get（“，{validateStatus:函数（状态）{
返回（状态>=200&&status<300）| |状态==400；
}})
.然后（功能（响应）{
//处理成功；
})
.catch（函数（响应）{
//处理错误
})
.finally（函数（错误）{
//总是执行
}); ```

axios
  .get("<URL>",{validateStatus: function (status) {
    return (status >= 200 && status < 300) || status==400;
  }})
  .then(function(response) {
    // handle success;
  })
  .catch(function(response) {
    // handle error
  })
  .finally(function(error) {
    // always executed
  }); ```