使用 Promise 替代 async / await答案

【问题标题】：Alternative to async / await using promises使用 Promise 替代 async / await
【发布时间】：2019-09-21 23:29:17
【问题描述】：

我使用地理配准系统，我正在按纳税人姓名进行搜索，作为响应，他在地图上返回了一批，他在数据库中提出了一个请求，如果请求为真，他使用 async/await 它重定向到该批次，但我不能使用它，因为在生产中 babel 不接受

 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());
      }
    }

但是我不能使用 async / await 来解决 babel 兼容性问题，我做出了承诺但它没有用

  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());
  }
}

我想知道其他方法，谢谢

【问题讨论】：

什么是兼容性问题？这里没有提到任何错误
当我们创建构建以进入生产环境时，babel 无法识别异步/等待
听起来你使用的是旧版本的 babel
对于没有async/await的条件句中的承诺，请参阅this

标签： javascript promise async-await

【解决方案1】：

您在第二次尝试时没有正确使用 Promise。

这一行将返回一个承诺：

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

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

  });

这意味着在下一行中，entidade 将没有预期值：

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

你必须改为链式承诺：

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
 });

您可能应该阅读本文以了解如何链接承诺：https://javascript.info/promise-chaining

顺便说一句，您可能会考虑将您的函数拆分为多个较小的函数。这将使您的代码更易于阅读。

【讨论】：