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

IT技术 javascript node.js reactjs axios
2021-05-04 08:05:26

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

我在 nodejs 中创建了一个服务，我400用error message. 我想在 上显示此错误消息frontend。

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

现在我想在前端显示此错误消息。on catch I will not get this message.

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();
        }

on catch 我不会收到这条消息。继续 stack of error [![enter image description here][1]][1]

在此处输入图片说明

3个回答

在这种特殊情况下，最好从服务器使用 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
  }
}

作为参考，Dan 有一个非常基础和很好的教程。 https://egghead.io/lessons/javascript-redux-displaying-error-messages

Axios 在 request-config 中有 validateStatus ，您可以在其中将您的状态列入白名单

https://github.com/axios/axios#request-config

//validateStatus定义是解析还是拒绝给定 // HTTP 响应状态代码的Promise。如果validateStatus 返回true（或设置为null // 或undefined），则Promise将被解析；否则，Promise将被 // 拒绝。

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
  }); ```
其它你可能感兴趣的问题
上一篇Anet A6，Marlin 1.1.x，带传感器探头的床调平 下一篇使用 css module如何定义全局类