AJAX-запросы внутри цикла

Question

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

 var targetcontrols = [];
        var targetcontrols_array = targetControl.split(',');
        var targetsourcecontrols = [];
        var targetsource_array = targetSource.split(',');
        for(i=0; i < targetcontrols_array.length; i++)
        {
            var control_name=targetcontrols_array[i];
            var source=targetsource_array[i];
            $.ajax({
                url: action_url,
                type: 'POST',
                traditional: true,
                async: false,
                data: JSON.stringify( { allselected: allselected_flag, selectedIds: selectedvalues,targetControl:control_name,  targetSource: source, dependency: dependencyOptions } ),
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function (response) {
                    //To clear existing items
                    var target= $("#"+response.targetControl);
                    target.multiselect('dataprovider', []);
                    var dropdown2OptionList = [];
                    for (i = 0; i < response.values.length; i++) {
                        dropdown2OptionList.push({
                            'label': response.values[i].text,
                            'value': response.values[i].value
                        })
                    }
                    console.log("--control"+control_name);
                    //re initialize the search plugin
                    target.multiselect('dataprovider', dropdown2OptionList);
                    target.multiselect('rebuild');
                }
            });

Как я могу убедиться, что первый элемент в цикле также заполняется значениями ответа

Answer 1

Вы можете попробовать map, чтобы получить массив Promise.После этого используйте Promise.all() для выполнения этого массива обещаний.

var targetcontrols = [];
var targetcontrols_array = targetControl.split(',');
var targetsourcecontrols = [];
var targetsource_array = targetSource.split(',');
const arrOfPromises = targetcontrols_array.map(function(item, index) {
  const control_name = item;
  const source = targetsource_array[index];
  return new Promise((resolve) => {
    $.ajax({
      url: action_url,
      type: 'POST',
      traditional: true,
      async: false,
      data: JSON.stringify( { allselected: allselected_flag, selectedIds: selectedvalues,targetControl:control_name,  targetSource: source, dependency: dependencyOptions } ),
      contentType: "application/json; charset=utf-8",
      dataType: 'json',
      success: function (response) {
        //To clear existing items
        var target= $("#"+response.targetControl);
        target.multiselect('dataprovider', []);
        var dropdown2OptionList = [];
        for (i = 0; i < response.values.length; i++) {
          dropdown2OptionList.push({
            'label': response.values[i].text,
            'value': response.values[i].value
          })
        }
        console.log("--control"+control_name);
        //re initialize the search plugin
        target.multiselect('dataprovider', dropdown2OptionList);
        target.multiselect('rebuild');
        resolve(`done for url ${control_name}`) // Show log for checking process
      }
  })
})
  
Promise.all(arrOfPromises)

Answer 2

Эти 2 объявления:

var control_name = targetcontrols_array[i];
var source = targetsource_array[i];  

могут быть причиной проблемы.Поскольку var имеет function scope, а for loop - это block scope, поэтому при использовании цикла эти переменные control_name и source заменяются следующими, прежде чем они будут использованы в запросе ajax.Вот почему вы всегда получаете последнее.Вы должны изменить var на const или let, которые поддерживают block scope

const control_name = targetcontrols_array[i];
const source = targetsource_array[i];

Answer 3

Прежде всего, если вы используете jquery, используйте его полный потенциал, вместо for циклов, используйте $.each:

var targetcontrols = [];
        var targetcontrols_array = targetControl.split(',');
        var targetsourcecontrols = [];
        var targetsource_array = targetSource.split(',');
        $.each(targetcontrols_array, function(i, item)
        {
            var control_name=targetcontrols_array[i];
            var source=targetsource_array[i];
            $.ajax({
                url: action_url,
                type: 'POST',
                traditional: true,
                async: false,
                data: JSON.stringify( { allselected: allselected_flag, selectedIds: selectedvalues,targetControl:control_name,  targetSource: source, dependency: dependencyOptions } ),
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function (response) {
                    //To clear existing items
                    var target= $("#"+response.targetControl);
                    target.multiselect('dataprovider', []);
                    var dropdown2OptionList = [];
                    $.each(response.values, function(v, vItems) {
                        dropdown2OptionList.push({
                            'label': response.values[v].text,
                            'value': response.values[v].value
                        })
                    });
                    console.log("--control"+control_name);
                    //re initialize the search plugin
                    target.multiselect('dataprovider', dropdown2OptionList);
                    target.multiselect('rebuild');
                }
            });
        });