如何避免AJAX async = false

Question

我正在尝试仅在data的所有循环完成以及每个data的ajax完成时运行这段代码。

flowData["operators"] = operators;
  console.log(flowData);
  // Apply the plugin on a standard, empty div...
  $('#testCaseConnections').flowchart({
    data: flowData
  });

我有async=false但由于这是不好的做法，我尝试了另一种做法，但它没有用。

如何在所有内容运行后运行该代码？

我的代码

这基本上是获取一些名称并从这些名称的db获取输入并创建一个javascript对象以在flowchart上运行

$.when($.each(data, function(index, value) {
  testCaseName = value[1];
  var testCaseType = value[2];
  $('#testCaseList').append('<li class="list-group-item justify-content-between">' + testCaseName + ' (' + testCaseType + ')' +
    '<div class="icons-right">' +
    '<a class="action-icon" id="delete-' + testCaseName + '" name="' + testCaseName + '"><span class="fa fa-trash"></span></a>' +
    '</div></button></li>');

  //#################### TEST CASE CONNECTIONS #########################
  var operator = {};
  $.ajax({
    type: 'post',
    url: '/flow/getInputs?testCaseName=' + testCaseName,
    success: function(inputs) {
      //Create test case container
      var properties = {};
      properties["title"] = testCaseName;
      var operatorInputs = {};
      for (var i = 0; i < inputs.length; i++) {
        operatorInputs["input_" + i] = {
          label: inputs[i].name
        };
      }
      properties["inputs"] = operatorInputs;
      properties["outputs"] = {};
      //set a different position (otherwise they get stacked)
      posy += 200;
      operator = {
        top: posx,
        left: posy
      };
      operator["properties"] = properties;
      operators["operator" + index] = operator;

    }
  });
})).then(function() {
  flowData["operators"] = operators;
  console.log(flowData);

  // Apply the plugin on a standard, empty div...
  $('#testCaseConnections').flowchart({
    data: flowData
  });
});