将 Axios 与 TanStack-Query useMutation (asyncMutation) 一起使用时出现 net::ERR_CONNECTION_REFUSED 和未捕获错误

Question

在我的应用程序上，我尝试实现一个简单的登录，如果我的服务器正在运行，它就可以正常工作。但是当我的后端离线时，我尝试捕获错误并将其显示给用户。但我仍然在控制台中遇到不需要的错误，即使我用 try/catch 包装了所有内容并处理这些错误。在这种情况下，我不明白为什么我无法在 apiLoginMutation 中捕获错误，但在控制台中却出现未捕获的错误。

我使用的设置

• Vite（使用 TypeScript）
• 反应
• TanStack 查询
• TanStack 路由器
• Axios
• 反应挂钩形式

这就是我设置一切的方式。

AuthPage 组件

const AuthPage = () => {

    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm<LoginFormSchemaType>({
        resolver: zodResolver(LoginFormSchema),
        defaultValues: {
            email: "",
            password: "",
        },
    });

    const { mutateAsync: apiLoginMutation } = useMutation({
        mutationFn: APILogin,
        onSuccess: () => {
            //Handle the redirect
        },
        onError: (error: AxiosError) => {
            console.log("Error in onError: " + error.message);
        },
    });

    const onSubmit = async (data: LoginFormSchemaType) => {
        try {
            apiLoginMutation(data);
        } catch (error) {
            console.log("Error on apiLoginMutation call: " + error); //This never gets called! 
        }
    };

    return ( //JSX Stuff as Form)
};

http.ts

import axios from "axios";

const API_URL = "http://localhost:8000/api";

export type LoginData = {
    email: string;
    password: string;
};

export async function APILogin(formData: LoginData) {
    try {
        const { data } = await axios.post(
            `${API_URL}/login`,
            { email: formData.email, password: formData.password },
            { withCredentials: true }
        );
        axios.defaults.headers.common["Authorization"] = `Bearer ${data.token}`;
    } catch (err) {
        throw err;
    }
}

如上所述，我尝试将所有内容包装在 try/catch 中，但从未达到我的控制台上没有显示任何错误的程度。还尝试构建我的应用程序（使用 vite）并作为预览运行。所有错误仍然可见，因为我已经阅读了一些 DEVMODE 部件每次都会显示，但它们甚至出现在生产版本中，所以我无法确认这些理论（<--- relates mostly to the POST http://localhost:8000/api/login net::ERR_CONNECTION_REFUSED error in console)

Answer 1

        try {
            apiLoginMutation(data);
        } catch (error) {
            console.log("Error on apiLoginMutation call: " + error); //This never gets called! 
        }

这部分没有捕获任何错误，因为

apiLoginMutation

是异步的，您需要

await

它。

        try {
            await apiLoginMutation(data);
        } catch (error) {
            console.log("Error on apiLoginMutation call: " + error); //This never gets called! 
        }

这应该会有所作为。