I have a contact me form in my frontend with three fields -> name, email, message. which are being passed to backend using axis

if the user doesn't enter any of the one value, it should show "please fill all the details" which is coming from backend. But here in my case in browser console.log i am seeing this error

POST https:/api-endpoint/contactMe 400

try-catch block catch error:

    Error: Request failed with status code 400
        at createError (createError.js:16:1)
        at settle (settle.js:17:1)
        at XMLHttpRequest.handleLoad (xhr.js:62:1)

If all the fields are entered it results in successful message from backend which is "thank you for contacting jatin" - this works perfectly well

Why 200 status code msg from backend is working and why 400 status code msg from backend results in error? Is this an issue with axios that for 400 or error status code it will raise exception?

Here is my react code

const handleName = (e) => {
    setName(e.target.value);
  };
  const handleEmail = (e) => {
    setEmail(e.target.value);
  };
  const handleMessage = (e) => {
    setMessage(e.target.value);
  };
  const submitForm = async (e) => {
    e.preventDefault();
    try {
      let data = {
        name,
        email,
        message,
      };
      setBool(true);
      console.log(data);
      const res = await axios.post(
        'https:/api-endpoint/contactMe',
        data
      );
      console.log(res);
      if (name.length === 0 || email.length === 0 || message.length === 0) {
        console.log('hihi');
        setBanner(res.data.msg);
        toast.error(res.data.msg);
        setBool(false);
      } else if (res.status === 200) {
        setBanner(res.data.msg);
        toast.success(res.data.msg);
        setBool(false);

        setName('');
        setEmail('');
        setMessage('');
      }
    } catch (error) {
      console.log(error);
    }
  };

my backend route

app.post('/contactMe', async (req, res, next) => {
  const data = req.body;
  if (
    data.name.length < 1 ||
    data.email.length < 1 ||
    data.message.length < 1
  ) {
    return res.status(400).json({ msg: 'Please fill all the fields' });
  }

  const params = {
    Destination: {
      ToAddresses: ['[email protected]'],
    },
    Message: {
      Body: {
        Text: { Data: `${data.message}` },
      },

      Subject: {
        Data: `Hiring interest from "${data.name}" : "${data.email}"`,
      },
    },
    Source: '[email protected]',
  };
  try {
    const data = await ses.sendEmail(params).promise();
    console.log(data);
    return res.status(200).json({ msg: 'Thank you for contacting Jatin!!!' });
  } catch (error) {
    console.log(error);
    return res.status(500).json({ msg: 'Service Unavailable' });
  }
});

CodePudding user response：

Perhaps this approach might help you?

const handleName = (e) => {
    setName(e.target.value);
  };
  const handleEmail = (e) => {
    setEmail(e.target.value);
  };
  const handleMessage = (e) => {
    setMessage(e.target.value);
  };
  const submitForm = async (e) => {
    e.preventDefault();
      let data = {
        name,
        email,
        message,
      };
      setBool(true);
      console.log(data);
      const res = await axios.post(
        'https:/api-endpoint/contactMe',
        data
      ).then(res => { // Response handler
        console.log(res);
        setBanner(res.data.msg);
        toast.success(res.data.msg);
        setBool(false);

        setName('');
        setEmail('');
        setMessage('');
      }).catch(error => { // Error handler
        console.log(error);
        setBanner(error.response.data.msg);
        toast.error(error.response.data.msg);
        setBool(false);
      });
  };

CodePudding user response：

Even though @Simon's solution did worked for me

As per comments, axios default behavious to raise error for status codes other than 2xx.

So i clever way would be to just change status code on server side.

changing 400 with 200 and 200 with 201 also helped me.