Promise.all затем обратный вызов выполняется только один раз

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

Я использую обещание, чтобы выполнить некоторые действия в самом конце загрузки 3 диаграмм, но хочу сохранитьсинхронизация загрузки.

console.log('TEST') в обратном вызове then работает при первой загрузке.

При отправке второй формы диаграммы действительно перезагружаются, но обратный вызов then никогда не вызывается.

Я уверен, что что-то упустил, но что?: -)

Спасибо

Answer 1

Итак, я наконец нашел решение.Только не создавайте новый Promise, когда вы используете jQuery ajax call.Просто ответ на звонок работает, потому что это также обещание:

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 здесь излишне, но я не знаю, почему это вызвало мою проблему ... Может быть, кто-то может добавить некоторыеподробности здесь.