HTTP请求发送时如何在React JS中显示错误消息？

Question

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

我在将400发送error message状态的nodejs中提供服务。我想在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]

Answer 1

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

encoder_img = tf.keras.layers.Input(shape=(16,16,1), name="input")
x = tf.keras.layers.Conv2D(1024, 1, activation='relu',kernel_initializer=keras.initializers.RandomUniform)(encoder_img)
x = tf.keras.layers.MaxPooling2D(1)(x)
inputtothelayer = tf.keras.layers.Conv2D(512, 1, activation='relu')(x)
pool = tf.keras.layers.MaxPooling2D(1, name="thelayer")(inputtothelayer)
encoder = tf.keras.Model(inputs=encoder_img, outputs=pool, name = 'encoder')
encoder.summary()

layer_name = 'thelayer'
intermediate_layer_model = tf.keras.Model(inputs=encoder_img,
                                 outputs=encoder.get_layer(layer_name).output)
intermediate_output = intermediate_layer_model.predict(data)
print(intermediate_output)

one_hot = tf.keras.utils.to_categorical(intermediate_output,num_classes=None, dtype='float32')

bottleneck = tf.keras.layers.Conv2D(256, 3, activation='relu')(one_hot)

因此，在客户端中，您可以轻松阅读app.get('/a',(req,res) => { res.status(400).json({message:"some reason error message"}) })

error.response

详细了解如何处理axios here中捕获的错误

Answer 2

这是一个非常主观的问题。您可能需要使用一些中间件，以更好的方式（例如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

Answer 3

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

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

  

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

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