Вычислить поле на основе двух ajax запросов

Question

Я пытаюсь разработать веб-приложение на Django. У меня есть два ajax запроса в шаблоне HTML, которые работают хорошо, но когда я пытаюсь вычислить поле и поместить его в другое поле (#minherente), это вычисляет поле с предыдущим значением, но не с значения попали в два ajax. Я буду признателен за вашу помощь.

$("#id_Falla").change(function () {
  var url = $("#MatrizForm").attr("data-fi-url"); 
  var FallaId = $("#id_Falla").val();  
  var url1 = $("#MatrizForm").attr("data-ii-url"); 

  $.ajax({                     
    url: url,                  
    data: {
      'Falla': FallaId      
    },
    success: function (data) {   
      $("#finherente").val(data);

    }
  });
  $.ajax({                      
    url: url1,                 
    data: {
      'Falla': FallaId      
    },
    success: function (data1) {  
      $("#iinherente").val(data1);  
    }

  });

  var frecuencia = $('#finherente').val();
  var impacto = $('#iinherente').val();

  $('#minherente').val(frecuencia*impacto);
});

Любая помощь будет признательна, спасибо

Answer 1

Поскольку запросы ajax являются асинхронными, вы не можете зависеть от данных, разрешаемых за пределами обратного вызова. Только внутри успешного обратного вызова вы можете убедиться, что данные разрешены.

Вы можете просто сделать один запрос за другим, вложив их, и только после того, как оба они будут разрешены, вы получите доступ к данным:

$("#id_Falla").change(function () {
  var url = $("#MatrizForm").attr("data-fi-url");
  var FallaId = $("#id_Falla").val();
  var url1 = $("#MatrizForm").attr("data-ii-url");

  $.ajax({
    url: url,
    data: {
      'Falla': FallaId
    },
    success: function (frecuencia) {
      $.ajax({
        url: url1,
        data: {
          'Falla': FallaId
        },
        success: function (impacto) {
          $("#finherente").val(frecuencia);
          $("#iinherente").val(impacto);  
          $('#minherente').val(frecuencia * impacto);
        }
      });
    }
  });
});

Если вы хотите обрабатывать оба запроса одновременно, вы можете использовать Promise.all , поскольку jQuery работает с обещаниями из коробки:

$("#id_Falla").change(function () {
  var url = $("#MatrizForm").attr("data-fi-url");
  var FallaId = $("#id_Falla").val();
  var url1 = $("#MatrizForm").attr("data-ii-url");

  Promise.all([
    $.ajax({
      url: url,
      data: {
        'Falla': FallaId
      },
    }),
    $.ajax({
      url: url1,
      data: {
        'Falla': FallaId
      },
    }),
  ]).then(([frecuencia, impacto]) => {
    $("#finherente").val(frecuencia);
    $("#iinherente").val(impacto);  
    $('#minherente').val(frecuencia * impacto);
  });
});

В качестве альтернативы рассмотрите возможность использования fetch вместо jQuery s $.ajax.