title: why does 400 status code result always entercatch block execution with axios?
body: <p>I have a contact me form in my frontend with <strong>three fields -&gt; name, email, message.</strong> which are being passed to backend using axis</p>
  <blockquote>
  <p>if the user doesn't enter any of the one value, it should show  &quot;please fill all the details&quot; which is coming from backend. But here in my case in browser console.log i am seeing this error</p>
  </blockquote>
  <pre><code>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)
  </code></pre>
  <p><strong>If all the fields are entered it results in successful message from backend which is &quot;thank you for contacting jatin&quot; - this works perfectly well</strong></p>
  <p>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?</p>
  <p>Here is my react code</p>
  <pre><code>const handleName = (e) =&gt; {
      setName(e.target.value);
    };
    const handleEmail = (e) =&gt; {
      setEmail(e.target.value);
    };
    const handleMessage = (e) =&gt; {
      setMessage(e.target.value);
    };
    const submitForm = async (e) =&gt; {
      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);
      }
    };
  </code></pre>
  <p>my backend route</p>
  <pre><code>app.post('/contactMe', async (req, res, next) =&gt; {
    const data = req.body;
    if (
      data.name.length &lt; 1 ||
      data.email.length &lt; 1 ||
      data.message.length &lt; 1
    ) {
      return res.status(400).json({ msg: 'Please fill all the fields' });
    }
  
    const params = {
      Destination: {
        ToAddresses: ['reciever@gmail.com'],
      },
      Message: {
        Body: {
          Text: { Data: `${data.message}` },
        },
  
        Subject: {
          Data: `Hiring interest from &quot;${data.name}&quot; : &quot;${data.email}&quot;`,
        },
      },
      Source: 'sender@gmail.com',
    };
    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' });
    }
  });
  </code></pre>