La aplicación en el evento created
ejecuta la solicitud AJAX al servidor para obtener un estado. En el evento mounted
, la aplicación activa la devolución de llamada de carga con el estado para permitir al desarrollador decidir qué hacer a continuación.
Depende del estado La aplicación debe redirigir al usuario o mostrar el mensaje. Hasta que AJAX esté en progreso, el usuario debería ver el ícono de carga.
Aquí hay un problema asincrónico. En el evento created
, una solicitud ya se envió y la aplicación se activó mounted
, pero la solicitud aún se ejecuta en segundo plano. Y el desarrollador recibe el estado predeterminado.
¿Cómo esperar el estado del backend y solo después del evento de fuego mounted
?
3 respuestas
Si realmente siente que necesita retrasar el ciclo montado: Al mirar el ciclo de vida aquí, indica si no hay una opción 'el' en el componente, entonces puede llamar manualmente a mount usando vm. $ mount (el).
Sin embargo, ¿no podría usar el gancho del ciclo de vida beforeUpdate? Entonces, en lugar de retrasar la función de montaje (retrasar el montaje del componente parece una mala idea), ¿devuelve los datos de la solicitud que activa el beforeUpdate?
Otro método simple es usar v-if
, así:
<div class="status" v-if="requestDone">status</div>
<div class="loading" v-else>loading</div>
En js:
data() {
return {
requestDone: false
}
}
created() {
promise.then(() => {
...
this.requestDone = true
})
}
El ajuste de estado se procesará hasta que requestDone
se convierta en true
.
Un mejor enfoque para manejar este escenario es usar NavigationGuards
en vue-router
.
beforeRouteEnter
ayuda a decidir si se debe cargar un componente particular asociado al enrutador o si se debe navegar a otra ruta antes de cargar el componente.
beforeRouteEnter
Viene con el siguiente controlador. Solo cuando se invoca next
, el componente se cargará. Este protector es un área perfecta para solicitudes AJAX.
next()/next(true)
- continúa con la navegación. Esto se puede usar cuando se resuelve la promesa
next(false)
- la navegación no ocurre.
beforeRouteEnter (to, from, next) {
// called before the route that renders this component is confirmed.
// does NOT have access to `this` component instance,
// because it has not been created yet when this guard is called!
},
Una vez que la navegación de ruta es decidida por beforeRouteEnter guard
, se pueden invocar ganchos de ciclo de vida de componentes como created() or mounted()
para acciones adicionales
Referencia: https://router.vuejs.org /en/advanced/navigation-guards.html
Preguntas relacionadas
Nuevas preguntas
ajax
AJAX (Asynchronous JavaScript and XML) es una técnica para crear interfaces de usuario de sitios web interactivos sin la actualización o recarga de la página web tradicional. Utiliza el intercambio de datos asincrónico entre el cliente y el servidor para actualizar la información mostrada y responder a las interacciones del usuario sin problemas. Incluya etiquetas adicionales para lenguajes de programación, bibliotecas, marcos, navegador web, protocolos y otra información ambiental.