No entiendo bien qué hacen _createTransportNetworkToMap
y _createLinesToMap
porque no veo su definición, pero imagino que son funciones asíncronas que hacen el llamado por axios que mencionaste. Para lo que nos convoca:
Cuando haces
loadLayersToMap: function(map) {
Promise.all([
this.createTransportNetworkToMap(map),
this.createLinesToMap(map)
]);
this.mapIsLoaded = true;
}
Primero, corres las promesas en paralelo y no hay cómo garantizar el orden. Segundo, el llamado a this.mapIsLoaded
se ejecuta de forma inmediata antes de que se resuelvan las promeras. Si las quieres ejecutar en secuencia podrías llamarlas como:
loadLayersToMap: function(map) {
return this.createTransportNetworkToMap(map)
.then(()=>{
return this.createLinesToMap(map);
}).then(()=> {
this.mapIsLoaded = true;
return; // siempre debieras retornar algo
}).catch((err)=>{
console.error(err); // es sano atrapar posibles errores
return;
});
}
Pero considerando que estamos en el 2019, mejor haz simplemente
async loadLayersToMap(map) {
try {
await this.createTransportNetworkToMap(map);
await this.createLinesToMap(map);
this.mapIsLoaded = true;
} catch (err) {
console.error(err);
}
return;
}
Otra observación: createTransportNetworkToMap
y createLinesToMap
devuelven una promesa. Pero el constructor de promesa no se resuelve automáticamente por hacer un return. En tu caso el comportamiento del mensaje en pantalla y consola es un efecto secundario.
Debiera ser mucho más simple:
createTransportNetworkToMap(map) {
this.loadingItem = "Cargando mapa";
return _createTransportNetworkToMap(map).then(() => {
console.log("mapa cargado");
return;
});
}
Y lo mismo, mutatis mutandi, con el otro método. loadLayersToMap
invoca a los otros com await
por lo que va a tratar el resultado como una promesa. Por su parte, axios te devolverá una promesa. No necesitas envolver a mano en un constructor de promesa.
Ya que las llamadas a await van en orden, puedes simplificar aún más:
async loadLayersToMap(map) {
try {
await this.createTransportNetworkToMap(map);
await this.createLinesToMap(map);
this.mapIsLoaded = true;
} catch (err) {
console.error(err);
}
return;
},
async createTransportNetworkToMap(map) {
this.loadingItem = "Cargando mapa";
await _createTransportNetworkToMap(map);
console.log("mapa cargado");
return;
},
async createLinesToMap(map) {
this.loadingItem = "Cargando líneas";
await _createLinesToMap(map);
console.log("Líneas cargadas");
return;
},
Nótese que estoy manejando loadingItem y el console.log en los métodos y no en la secuencia principal, simplemente por seguir el principio de única responsabilidad. El llamado principal sólo necesita saber que debe llamar a los métodos en secuencia. Esos métodos deben preocuparse de informar a qué se están dedicando.
Nótese también que no hay un catch en los métodos secundarios. La eventual excepción subirá rio arriba y la capturarás en el método principal. Un sólo punto de falla te ahorra varias pesadillas.
Sólo como sugerencia, no necesitas poner watchers en la data del componente. Puedes manejarlas como propiedades computadas.
data: function() {
return {
map: null,
mapState: false,
messageState: null
};
},
computed: {
loadingItem: {
get() {
return this.messageState;
}
set(loadingItem) {
this.messageState=loadingItem;
EventBus.$emit("loadingItemChanged", this.messageState);
}
},
mapIsLoaded: {
get() {
return this.mapState;
}
set(mapIsLoaded) {
this.mapState=mapIsLoaded;
EventBus.$emit("loadingItemChanged", this.mapState);
}
},
}
El componente sabe cuándo debe cambiar sus estados, el watcher es menos eficiente y sólo tendría sentido si observas un valor que éste no controla por sí mismo (como las props)