Question

我正在尝试跟踪React中的锚标记（<a>）点击（即在导航发生之前向我的服务器发送POST请求）。

我的代码当前如下所示：

<a 
  href="http://example.com"
  onClick={() => axios.post('http://my-server.com', { value: 'Hello' })}
>
  Click Me!
</a>

但是问题在于，由于POST请求是异步的，因此“ href事件”在请求完成之前发生，因此请求被取消。

那么如何在导航发生之前执行异步事件？

Answer 1

如果您正在寻找跟踪锚，则可以使用ping属性来实现。检查this。

<a href="/stackoverflow" ping="/tracker/going-to-stackoverflow">click>

请注意，并非所有浏览器都支持此功能。

Answer 2

从在您的点击处理程序中接受事件开始。这样您就可以停止导航，直到发布完成为止。

Axios在您发出请求时会返回一个承诺。您需要等待该操作完成，然后再处理导航。

(event) => {
   // stop the browser from navigating
   event.preventDefault();
   // save url so that you have the value after the event was disposed
   const redirectUrl = event.target.href;
   axios.post('http://my-server.com', { value: 'Hello' })
   .then(response => {
     // handle success
     console.log(response);
   })
   .catch(error => {
     // handle error
     console.log(error);
   })
   .then(() => {
     // always executed
     // navigate logic here
     console.log(redirectUrl);
   });
}

React中的异步锚点的onClick事件

2 个答案: