javascript - 我该怎么做才能避免同步 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

例如，您可以在您的情况下使用 promise :

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