Tengo varias listas desplegables en una página web que recuperan su contenido a través de una llamada API al servidor, que son todas muy rápidas, y una llamada adicional que recupera 1000 filas de la base de datos, un tiempo de respuesta considerablemente mayor. Tengo este código Javascript/Vue que se ejecuta cuando todo está cargado y listo para funcionar:
setOrderStatuses: async function () { ... }, setSpecialOrders: async function () { ... }, setSubmitterNames: async function () { ... }, ... mounted: function () { this.$nextTick(async function () { return await Promise.all([ this.setOrderStatuses(), this.setSpecialOrders(), this.setSubmitterNames() ]); }); }, ...donde todo recupera datos como se esperaba, pero la interfaz de usuario no se actualiza hasta que se cumplen todas las promesas. Si coloco un punto de interrupción en el servidor que bloquea la respuesta a setOrderStatuses() , por ejemplo, ninguno de los otros métodos actualiza la interfaz de usuario hasta que haga clic en continue y se cumpla la promesa.
simplemente haga que su método mouted sea asíncrono como:
async mounted () { await this.setOrderStatuses() await this.setSpecialOrders() await this.setSubmitterNames() }