如何处理axios对react查询的延迟响应?

rqenqsqc  于 2023-04-20  发布在  iOS
关注(0)|答案(1)|浏览(146)

为了测试的目的,我调用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返回就立即调用了。

v1l68za4

v1l68za41#

这是因为UserLogin中的所有代码都是同步的,并立即执行(setTimeout将导致内部函数排队等待稍后执行,但setTimeout本身的执行仍然是同步的)。
为了得到你想要的结果,你必须将setTimeout Package 在一个等待的promise中,一旦回调被触发,这个promise就会被解析。
编辑:以下是更新UserLogin fn的示例。

async function UserLogin(user) {
  console.log("USER LOGIN API CALLED");
  console.log(user);
  await new Promise((resolve) => {
    setTimeout(async () => {
      await axios.post("/Auth/Login", user);
      resolve()
  },5000)
  })
}

我们将超时 Package 在Promise中,一旦从队列中返回超时并且我们的post逻辑结束,我们就解决它。这将确保UserLogin的执行被挂起,直到超时回调被触发。

相关问题