Alternative to async / await using promises

Question

I work with georeferencing system, I'm doing a search by taxpayer name and in response he returns a batch on the map, he makes a request in the database and if the request is true he redirects to the batch using async / await it works, but I can't use it because in production babel doesn't accept

 async buscarGeometria(entidade) {
      let entidadeAnterior = entidade;
      if (entidade && entidade.id) {
        this.LoadingManager.show();
        if (entidade && entidade.isPessoa) {
          entidade = await this.DataFactory.GET(this.URL.LOTES() + '/' + entidade.val.lotes[0].id);
          entidade.URL = this.URL.LOTES();
          entidade.box = 'BoxInformacoesCadastrais';
        }
        this.DataFactory
          .GET(entidade.URL + '/geometria/' + entidade.id)
          .then(response => {
            if (response && response.geom) {
              entidadeAnterior.isPessoa ? this.CentralizaMapaBuscasService.centralizaMapa(this.mapa, entidade.centroide)
                : this.CentralizaMapaBuscasService.centralizaMapa(this.mapa, entidade.val.centroide);
              this.select = this.CentralizaMapaBuscasService.getSelect('Lotes', this.mapa);
              this.CentralizaMapaBuscasService.criarFeatureAndSelect(response.geom, this.select)
              entidadeAnterior.isPessoa ? this.CentralizaMapaBuscasService.mostraBroadcast(entidade.box, entidade)
                : this.CentralizaMapaBuscasService.mostraBroadcast(entidade.box, entidade.val);
            }
          }).finally(() => this.LoadingManager.hide());
      }
    }

but I can't use async / await for babel compatibility issue, I made promises but it didn't work

  buscarGeometria(entidade) {

  let entidadeAnterior = entidade;

  if (entidade && entidade.id) {

    this.LoadingManager.show();

    if (entidade && entidade.isPessoa) {

      this.DataFactory.GET(this.URL.LOTES() + '/' + entidade.val.lotes[0].id).then((snap) => {

        entidade = snap;
        entidade.URL = this.URL.LOTES();
        entidade.box = 'BoxInformacoesCadastrais';

      });

    }

    this.DataFactory.GET(entidade.URL + '/geometria/' + entidade.id).then(response => {

      if (response && response.geom) {

        entidadeAnterior.isPessoa ? this.CentralizaMapaBuscasService.centralizaMapa(this.mapa, entidade.centroide)
          : this.CentralizaMapaBuscasService.centralizaMapa(this.mapa, entidade.val.centroide);

        this.select = this.CentralizaMapaBuscasService.getSelect('Lotes', this.mapa);

        this.CentralizaMapaBuscasService.criarFeatureAndSelect(response.geom, this.select);

        entidadeAnterior.isPessoa ? this.CentralizaMapaBuscasService.mostraBroadcast(entidade.box, entidade)
          : this.CentralizaMapaBuscasService.mostraBroadcast(entidade.box, entidade.val);

      }
    }).finally(() => this.LoadingManager.hide());
  }
}

I would like to know some other way to do this, thanks

What is the compatibility problem? No mention of any errors here — charlietfl, Sep 21 '19 at 15:14
when we create the build to go up to production babel doesn't recognize async / await — Bruno Mello, Sep 21 '19 at 15:21
For having promises in conditionals without `async`/`await`, see [this](https://stackoverflow.com/q/26599798/1048572) — Bergi, Sep 21 '19 at 15:36

score 0 · Accepted Answer · answered Sep 21 '19 at 15:21

You are not using the promises properly on your 2nd attempt.

This line will return a promise :

this.DataFactory.GET(this.URL.LOTES() + '/' + entidade.val.lotes[0].id).then((snap) => {

    entidade = snap;
    entidade.URL = this.URL.LOTES();
    entidade.box = 'BoxInformacoesCadastrais';

  });

This means that in the next line, entidade will not have the expected values:

this.DataFactory.GET(entidade.URL + '/geometria/' + entidade.id)

You must instead chain the promises:

this.DataFactory.GET(this.URL.LOTES() + '/' + entidade.val.lotes[0].id).then((snap) => {

    entidade = snap;
    entidade.URL = this.URL.LOTES();
    entidade.box = 'BoxInformacoesCadastrais';
    return entidade; // Make sure you return the entidade value to make it available to the next callback
  })
 .then((entidade) => {
    return this.DataFactory.GET(entidade.URL + '/geometria/' + entidade.id);
 })
 .then((response) => {
     // Handle your response here
 });

You should probably read this to understand how to chain promises: https://javascript.info/promise-chaining

By the way, you sould probably consider to split your function in multiple smaller functions. It will make your code much much easier to read.

Alternative to async / await using promises

1 Answers1