javascript - 为什么请求 API 时总是出现错误而去 catch

Question

我对从服务器请求 API 有一些疑问。我为请求API做了一个函数，这个例子我有一个请求API登录，当用户填写错误的电子邮件时，响应API是“电子邮件或密码错误!”，当我在 postman 中尝试时，响应是成功的，但是当我尝试时我的代码的响应始终来自 catch，而不是来自响应 API。我的请求 API 代码如下

 const handleSubmitLogin = async (input) => {
    try {
      const result = await axios.post(`${BASE_URL}/users/client/login`, input);
      if (result.status == 200 || result.status === "success" || result.status == 201) {
        await setAuthKey(result.data.data.token);

        await setLoggedUser(JSON.stringify(result.data.data));

        dispatch(setUserLogin());
        dispatch(setDataLogin(result.data.data));
      } else {
        setModalActive({ status: true, data: result.message });
      }
    } catch (error) {
      console.log(error);
      setModalActive({ status: true, data: translations["please.try.again"] });
    }
  };

当用户填写错误的电子邮件或密码时，响应始终来自 catch 响应，而不是来自 API 响应。有人可以对这个案例提出建议吗？

编辑: 这是由于用户密码错误造成的

Answer 1

如果您的 API 以不成功的状态代码 (>= 400) 进行响应，Axios 将拒绝该 Promise，并且您的代码将进入 catch block 。

您仍然可以通过error.response.data访问响应数据。请参阅Axios - Handling Errors

try {
  const result = await axios.post(`${BASE_URL}/users/client/login`, input);

  // etc...
} catch (err) {
  console.warn("login", error.toJSON());
  setModalActive({
    status: true,
    data: error.response?.data?.message ?? translations["please.try.again"],
  });
}

使用 optional chaining 很重要因为错误可能没有响应或数据，具体取决于具体失败的原因。