为什么 400 状态码结果总是用 axios entercatch 块执行？答案

【问题标题】：why does 400 status code result always entercatch block execution with axios?为什么 400 状态码结果总是用 axios entercatch 块执行？
【发布时间】：2022-02-06 09:34:33
【问题描述】：

我的前端有一个与我联系的表单，其中包含 三个字段 -> 姓名、电子邮件、消息。 正在使用轴传递到后端

如果用户没有输入任何一个值，它应该显示来自后端的“请填写所有详细信息”。但在我的情况下，在浏览器 console.log 中我看到了这个错误

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)

如果输入了所有字段，则会从后端发送成功消息，即“感谢您联系 jatin” - 这非常有效

为什么来自后端的 200 状态代码 msg 正在工作，为什么来自后端的 400 状态代码 msg 会导致错误？这是 axios 的问题，对于 400 或错误状态代码会引发异常吗？

这是我的反应代码

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

我的后端路由

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: ['reciever@gmail.com'],
    },
    Message: {
      Body: {
        Text: { Data: `${data.message}` },
      },

      Subject: {
        Data: `Hiring interest from "${data.name}" : "${data.email}"`,
      },
    },
    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' });
  }
});

【问题讨论】：

我认为这是 axios 的默认行为；超出 2xx 范围的状态码是错误。
@Pointy 如果在 catch 块中处理它是个好主意吗？或者你有什么想法？
这是一个想法；当缺少一个或多个参数时，您自己的服务器端代码会以状态码 400 进行响应。您也许可以用不同的方式报告错误。
@thank you Pointy 在服务器端玩状态码是个好主意，您可以尝试将其发布为答案

标签： javascript node.js reactjs express axios

【解决方案1】：

也许这种方法可能对您有所帮助？

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

【讨论】：

【解决方案2】：

尽管@Simon 的解决方案确实对我有用

根据 cmets，axios 默认行为会针对 2xx 以外的状态码引发错误。

所以一个聪明的方法是在服务器端更改状态代码。

将 400 改为 200 和 200 with 201 也帮助了我。

【讨论】：