我该怎么做才能避免同步 AJAX 请求

Question

我有这个数组

var testFlows = ["test1","test2","test3","test4","test5"];

我正在尝试一一获取输入并生成一些 html（生成的 html 并不重要）。

重要的是我想按 testFlows 数组的顺序查看这个 html 面板。我的代码是完全随机的。如果我刷新页面，它们会位于不同的位置。

一种解决方案是制作一个同步 ajax，但它已被弃用且很糟糕，我还能做什么？

代码：

 var testFlows = ["test1","test2","test3","test4","test5"];

  $.each(testFlows, function (index, testFlow) {
            //get the inputs
            $.ajax({
               url: '/flow/getInputs',
               type: 'post',
               data: {testCaseName: testFlow.testCase.name},
               success: function (inputNames) {
                   testCaseAccordion = '<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapseTitle" data-toggle="collapse" data-parent="#accordion" href="#collapse-' + testFlow.testCase.name + index + '">' + testFlow.testCase.name + '(' + testFlow.testCase.type.name + ') <span id="eyeIcon" class="fas fa-eye float-right"></span></a></h4></div>';
                   testCaseAccordion += '<div id="collapse-' + testFlow.testCase.name + index + '" class="panel-collapse collapse"><div id="panel-body-' + testFlow.testCase.name + index + '" class="panel-body"></div></div>';
                   $('#accordion').append(testCaseAccordion);
                   if (testFlow.params !== null) {
                       var inputs = testFlow.params.split(',');
                       for (var i = 0; i < inputs.length; i++) {
                           $('#panel-body-' + testFlow.testCase.name + index).append('<strong class="color-red">' + inputNames[i] + ': </strong>' + inputs[i] + '<br>');
                       }
                   }
                   else {
                       $('#panel-body-' + testFlow.testCase.name + index).append("This test case doesn't have any inputs");
                   }
               }
            });

        });

Answer 1

您可以使用承诺，例如，在您的情况下：

var testFlows = ["test1","test2","test3","test4","test5"];

function success(testFlowAndInputNames, index) {
    var testFlow = testFlowAndInputNames[0];
    var inputNames = testFlowAndInputNames[1];
    var testCaseAccordion = '<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapseTitle" data-toggle="collapse" data-parent="#accordion" href="#collapse-' + testFlow.testCase.name + index + '">' + testFlow.testCase.name + '(' + testFlow.testCase.type.name + ') <span id="eyeIcon" class="fas fa-eye float-right"></span></a></h4></div>';
    testCaseAccordion += '<div id="collapse-' + testFlow.testCase.name + index + '" class="panel-collapse collapse"><div id="panel-body-' + testFlow.testCase.name + index + '" class="panel-body"></div></div>';
    $('#accordion').append(testCaseAccordion);
    if (testFlow.params !== null) {
        var inputs = testFlow.params.split(',');
        for (var i = 0; i < inputs.length; i++) {
            $('#panel-body-' + testFlow.testCase.name + index).append('<strong class="color-red">' + inputNames[i] + ': </strong>' + inputs[i] + '<br>');
        }
    }
    else {
        $('#panel-body-' + testFlow.testCase.name + index).append("This test case doesn't have any inputs");
    }
}


var arrayOfPromises = testFlows.map(function (testFlow) {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: '/flow/getInputs',
            type: 'post',
            data: {testCaseName: testFlow.testCase.name},
            success: resolve
        });
    })
    .then(function(inputNames) { 
        return [testFlow, inputNames];
    })
});

Promise.all(arrayOfPromises)
    .then(function(results) {
        results.forEach(success)
    });

Answer 2

jQuery ajax 返回一个promise，所以你可以将所有promise 保存到一个数组中，例如：

var testFlows = ["test1", "test2", "test3", "test4", "test5"];

var testFlowsPromises = $.map(testFlows, function(testFlow, index) {
  //get the inputs
  return $.ajax({
    url: '/flow/getInputs',
    type: 'post',
    data: {testCaseName: testFlow.testCase.name}
  }).then(function(inputNames) {
    return {
      inputNames: inputNames,
      testFlow: testFlow
    };
  });
});

然后，等到所有这些都完成：

$.when.apply($, testFlowsPromises).done(function() {
  $.each(arguments, function(index, data) {
    // do stuff with index, data.inputNames, data.testFlow
  });
});

现在您将拥有一个按相同顺序排列的 ajax 数据数组。

演示：

https://jsbin.com/fixuxezale/edit?js,console