为了测试的目的,我调用axios与setTimeout如下,这将调用并获得响应后5秒
async function UserLogin(user) {
console.log("USER LOGIN API CALLED");
console.log(user);
setTimeout(async() => {
return await axios.post("/Auth/Login", user);
},5000)
}
这是我的useMutation
export const apiAuthLogin = () => {
//const loginNavigate = useNavigate();
return useMutation({
mutationKey: ["login"],
mutationFn: async(user) => await UserLogin(user),
onSuccess: async (res) => {
console.log("useMutation Login Succcess");
console.log(await res?.data); //undefined error, because still axios is in timeout
localStorage.setItem("Token", res?.data);
},
onError: (err) => {
console.log('useMutation Login Failed')
console.log(err)
}
});
};
但是onSuccess没有等待axios返回就立即调用了。
1条答案
按热度按时间v1l68za41#
这是因为UserLogin中的所有代码都是同步的,并立即执行(setTimeout将导致内部函数排队等待稍后执行,但setTimeout本身的执行仍然是同步的)。
为了得到你想要的结果,你必须将setTimeout Package 在一个等待的promise中,一旦回调被触发,这个promise就会被解析。
编辑:以下是更新UserLogin fn的示例。
我们将超时 Package 在Promise中,一旦从队列中返回超时并且我们的post逻辑结束,我们就解决它。这将确保UserLogin的执行被挂起,直到超时回调被触发。