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.