Question

我有这段代码，可以加载3个AJAX请求并生成图表：

class IncidentStats {
  constructor($statsForm) {
    this.$statsForm = $statsForm;
    this.charts = [];

    this.$statsForm.on('submit', event => {
      event.preventDefault();
      this.renderCharts();
    });
  }

  prepareFormData(key) {
    const formData = this.$statsForm.serializeArray();

    formData.push({
      name: 'key',
      value: key,
    });

    return formData;
  }

  renderCharts() {
    Promise.all([
      this.renderGeneralStats(),
      this.renderServiceRepartitionStats(),
      this.renderServerRepartitionStats(),
    ]).then(() => console.log('TEST'));
  }

  // The two other methods does nearly the same thing.
  renderServiceRepartitionStats() {
    return new Promise(resolve => {
      $.post(this.$statsForm.attr('action'), this.prepareFormData('serviceRepartition'), data => {
        this.charts['incident-service-repartition-stats'] = this.createTop10Chart(
          $('#incident-service-repartition-stats'),
          'Alertes Nagios',
          data
        );
        resolve();
      }, 'json');
    });
  }
}

我使用promise来在3张图表加载的最后做一些事情，但希望保持加载同步。

console.log('TEST')回调上的then在首次加载时起作用。

在第二种表单提交中，确实确实重新加载了图表，但是从未调用then回调。

我确定我缺少什么，但是呢？：-）

谢谢

Answer 1

所以我终于找到了解决方案。只是在使用jQuery ajax调用时不要创建新的Promise。只需返回调用即可，因为它也是一个承诺：

renderServiceRepartitionStats() {
  return $.post(this.$statsForm.attr('action'), this.prepareFormData('serviceRepartition'), data => {
    this.charts['incident-service-repartition-stats'] = this.createTop10Chart(
      $('#incident-service-repartition-stats'),
      'Alertes Nagios',
      data
    );
  }, 'json');
}

我知道在这里使用new Promise是过分的，但是我不知道为什么这会导致我的问题...也许有人可以在此处添加一些详细信息。

Promise.all然后回调仅执行一次

1 个答案: