代码之家 › 专栏 › 技术社区 › Bagas Rizkiyanto

设置类型错误,尝试捕获类型脚本,但error.message除外

axios next.js typescript reactjs

0

Bagas Rizkiyanto · 技术社区 · 10 月前

我创建了一个从服务器端发送的自定义错误消息,当然我不仅仅使用

错误消息

以获取消息。所以我用

错误响应数据

获取消息并得到如下代码所示的错误。

const handleLogin = async (formData: FormData) => {
  const email = formData.get("email");
  const password = formData.get("password");

  axios
    .get("http://localhost:8000/sanctum/csrf-cookie")
    .then(async () => {
      try {
        const response = await axios.post(
          "http://localhost:8000/api/login",
          {
            email,
            password,
          },
          {
            headers: {
              Accept: "application/json",
              "Content-Type": "application/json",
            },
          }
        );

        console.log(response.data);
      } catch (error: unknown) {
        console.log((error as Error).response.data); // Property 'response' does not exist on type 'Error'.
      }
    })
    .catch((error) => {
      console.log(`Error: ${error.message}`);
    });
};

请帮我解决这个问题,我真的很感激

1 回复 | 直到 10 月前

1

Alireza Hedayati 10 月前

您遇到此问题是因为默认 Error TypeScript中的类型没有 response 财产。使用Axios时,错误通常为 AxiosError 类型,包括 响应 .

    import axios, { AxiosError } from "axios";

const handleLogin = async (formData: FormData) => {
  const email = formData.get("email");
  const password = formData.get("password");

  try {
    await axios.get("http://localhost:8000/sanctum/csrf-cookie");
    try {
      const response = await axios.post(
        "http://localhost:8000/api/login",
        { email, password },
        {
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
        }
      );
      console.log(response.data);
    } catch (error) {
      if (axios.isAxiosError(error)) {
        console.error(error.response?.data); // Use optional chaining to avoid undefined errors
      } else {
        console.error("An unexpected error occurred:", error);
      }
    }
  } catch (error) {
    console.error(`Error during CSRF request: ${error.message}`);
  }
};