Событие асинхронного якоря onClick в React

Question

Я пытаюсь отследить щелчки тега привязки (<a>) в React (т. Е. Отправить запрос POST на мой сервер непосредственно перед навигацией).

Мой код в настоящее время выглядит следующим образом:

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

Но проблема в том, что поскольку запрос POST является асинхронным, «событие href» происходит до его завершения, поэтому запрос отменяется.

Так как я могу выполнить асинхронное событие до того, как произойдет навигация?

Answer 1

Начните с принятия события в ваш обработчик по клику. Это позволит вам остановить навигацию, пока сообщение не будет завершено.

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);
   });
}

Answer 2

Если вы ищете отслеживающий якорь, вы можете использовать атрибут ping для этого. отметьте это .

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

обратите внимание, что не поддерживается во всех браузерах.