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

rqenqsqc 于 2023-04-20 发布在 iOS

关注(0)|答案(1)|浏览(145)

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

axios

来源：https://stackoverflow.com/questions/76019057/how-to-handle-delay-response-from-axios-to-react-query

1条答案

按热度按时间

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的执行被挂起，直到超时回调被触发。

赞(0）回复(0）举报 2023-04-20

我来回答

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

1条答案

相关问题

热门标签

最新问答