2

Estoy desarrollando un script que carga una serie de elementos, cada función está retornando una petición axios a un endpoint diferente.

Lo que intento hacer es, verificar que la primera petición "createTransportNetworkToMap" se ejecute primero, y dentro de esta que se añada a la variable loadingItem el valor de = "cargando mapa".

Como el valor anterior era null, se supone que el watch recoge el cambio y emite un evento a otro componente padre, que mostrará por consola el nuevo valor.

Tras esto, se realiza la petición y se espera a que termine para mostrar un console log. Ahora, cuando haya terminado, se pasaría a la siguiente función que realiza algo similar pero con diferentes valores.

Este es el código:

export default {
  name: "Map",
  data: function() {
    return {
      map: null,
      mapIsLoaded: false,
      loadingItem: null
    };
  },
  mounted: function() {
    this.map = loadMap();
    this.loadLayersToMap(this.map);
  },

  watch: {
    loadingItem: function() {
      EventBus.$emit("loadingItemChanged", this.loadingItem);
    },
    mapIsLoaded: function() {
      EventBus.$emit("mapIsLoaded", this.mapIsLoaded);
    }
  },
  methods: {
    loadLayersToMap: function(map) {
      Promise.all([
        this.createTransportNetworkToMap(map),
        this.createLinesToMap(map)
      ]);
      this.mapIsLoaded = true;
    },
    createTransportNetworkToMap: function(map) {
      return new Promise(() => {
        this.loadingItem = "Cargando mapa";
      }).then(
        _createTransportNetworkToMap(map).then(() => {
          console.log("mapa cargado");
        })
      );
    },
    createLinesToMap: function(map) {
      return new Promise(() => {
        this.loadingItem = "Cargando líneas";
      }).then(
        _createLinesToMap(map).then(() => {
          console.log("Líneas cargadas");
        })
      );
    },
    getLoadingItem: function(item) {
      this.loadingItem = item;
    }
  }
};

Por desgracia no se ejecuta como quiero y me muestra esto:

1

No lo ejecuta en orden y además, solo me muestra el último cambio.

2 respuestas 2

4

El orden en que se terminan promesas no depende en si del orden en que las ejecutas, si no del tiempo que estan necesiten, para evitar estos problemas hay varias maneras de realizarlo:

Encadenando promesas:

  methods: {
    loadLayersToMap: function(map) {
      Promise.all([
        this.createTransportNetworkToMap(map).then(() => {
          this.createLinesToMap(map);
        })
      ]);
      this.mapIsLoaded = true;
    },
    createTransportNetworkToMap: function(map, callback) {
      return new Promise(() => {
        this.loadingItem = "Cargando mapa";
      }).then(
        _createTransportNetworkToMap(map).then(() => {
          console.log("mapa cargado");
        })
      );
    },
    createLinesToMap: function(map) {
      return new Promise(() => {
        this.loadingItem = "Cargando líneas";
      }).then(
        _createLinesToMap(map).then(() => {
          console.log("Líneas cargadas");
        })
      );
    },
    getLoadingItem: function(item) {
      this.loadingItem = item;
    }
  }

Usando callbacks:

  methods: {
    loadLayersToMap: function(map) {
      Promise.all([
        this.createTransportNetworkToMap(map, () => { this.createLinesToMap(map) })
      ]);
      this.mapIsLoaded = true;
    },
    createTransportNetworkToMap: function(map, callback) {
      return new Promise(() => {
        this.loadingItem = "Cargando mapa";
      }).then(
        _createTransportNetworkToMap(map).then(() => {
          console.log("mapa cargado");

          callback();
        })
      );
    },
    createLinesToMap: function(map) {
      return new Promise(() => {
        this.loadingItem = "Cargando líneas";
      }).then(
        _createLinesToMap(map).then(() => {
          console.log("Líneas cargadas");
        })
      );
    },
    getLoadingItem: function(item) {
      this.loadingItem = item;
    }
  }

async/await:

  methods: {
    loadLayersToMap: async function(map) {

      await this.createTransportNetworkToMap(map);

      await this.createLinesToMap(map);

      this.mapIsLoaded = true;
    },
    createTransportNetworkToMap: function(map) {
      return new Promise(() => {
        this.loadingItem = "Cargando mapa";
      }).then(
        _createTransportNetworkToMap(map).then(() => {
          console.log("mapa cargado");
        })
      );
    },
    createLinesToMap: function(map) {
      return new Promise(() => {
        this.loadingItem = "Cargando líneas";
      }).then(
        _createLinesToMap(map).then(() => {
          console.log("Líneas cargadas");
        })
      );
    },
    getLoadingItem: function(item) {
      this.loadingItem = item;
    }
  }


1

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)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.