Sé que ya hay mucha discusión sobre este tema, pero todavía no he encontrado una solución. He encontrado bastantes respuestas que dicen que no es del todo posible, así que estoy buscando una alternativa sobre cómo manejar esto correctamente.

Para el contexto, estoy usando Vue con la tienda Pinia y Axios para mis llamadas a la API. En el backend tenemos un llamado "sistema de bloqueo" que asegura que solo una persona a la vez pueda editar un determinado objeto en la base de datos.

El problema que tengo ahora es que quiero ejecutar un método desde mi tienda Pinia con una llamada API axios SI el usuario cierra la ventana/navegador. Es una llamada API importante que se asegura de eliminar cualquier posible bloqueo para que otros usuarios puedan trabajar en el objeto. El tiempo de espera para el bloqueo se establece en 2 horas, por lo que, por ejemplo, si el usuario está editando algo y de repente cierra la ventana, el objeto permanece bloqueado durante otras 2 horas.

Tenemos la opción para que otros usuarios fuercen el bloqueo y expulsen al otro usuario de la edición del objeto, pero eso es solo para casos excepcionales e idealmente me gustaría evitarlo en esta situación.

He intentado cosas a lo largo de las líneas:

 window.addEventListener('beforeunload', function (e) { e.preventDefault() e.returnValue = '' store.deleteLocks() })

 document.addEventListener('visibilitychange', function () { if (document.visibilityState == 'hidden') { store.deleteLocks() } })

Supongo que lo más cercano que tuve fue probablemente lo siguiente:

 window.addEventListener('unload', function () { store.deleteLocks() })

Pero dado que es una función asíncrona, no se ejecuta correctamente.

Así que notar funciona como se esperaba. ¿Alguien tiene alguna idea de cómo manejar esto de manera inteligente o solucionarlo?