Sé que esta pregunta puede sonar repetitiva, pero he estado buscando una solución durante mucho tiempo y no pude encontrar ninguna.
Tengo un method que resuelve una promise después de cargar la ventana. Más tarde, estoy esperando ese método en mi gancho mounted . Al enrutar a esa página, no se ejecuta ni la promesa en sí ni nada posterior. Sin embargo, si actualizo la página, todo funciona sin problemas.
Como ejemplo, este es mi method :
getPosition() { return new Promise((resolve, reject) => { window.addEventListener("load", () => { console.log("window is loaded"); resolve(); }); }); }, Este es mi anzuelo mounted :
async mounted() { console.log("before promise"); // this logs await this.getPosition(); // this does not log console.log("after promise"); // this does not log },No se garantiza que getPosition se ejecute antes de load , y la condición de carrera dará como resultado una promesa pendiente. Que una ventana ya se haya cargado debe verificarse adicionalmente:
new Promise(resolve => { if (document.readyState === 'complete') { resolve(); return; } window.addEventListener("load", () => resolve()); }); El evento de load ocurre después de cargar todas las imágenes y estilos, lo que generalmente no es necesario pero genera un retraso adicional. La mayoría de las veces es útil esperar DOM en su lugar:
new Promise(resolve => { if (document.readyState !== 'loading') { resolve(); return; } document.addEventListener("DOMContentLoaded", () => resolve()); }); Se espera que la load y el evento DOMContentLoaded se emitan una vez en la carga de la página inicial. No se supone que los cambios posteriores de DOM y las solicitudes de red se rastreen a través de ellos.