javascript - Ajax 调用中的 Ajax 调用，第一个总是完成？

Question

我有一个ajax调用，它基于返回值，通过影响其url参数来调用另一个ajax调用，该url被第一个返回值修改。这两个调用是相关的，因为第一个调用提供第二个调用的 url 参数，并且其输出附加到一个全局变量，该变量用于生成最终的 HTML 集，随后附加到第一个调用中。作为一个简化的示例:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
var masterHtml = '';

$.ajax({
url: "http://thisisanexample/items",
type: "GET",
asynch: false,
contentType: "application/json;odata=verbose",
headers: {
    "Accept": "application/json;odata=verbose",
    "X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (data) {
    successHandler(data);
},
error: function (data) {

}
});

function successHandler(data) {
var results = data.d.results;
for (var i = 0; i < results.length; i++) {
    var someHtml = results[i]["someHtml"];
    masterHtml = masterHtml + someHtml;
    var nextThingUrl = results[i]["nextThingUrl"];
    // now go get the other HTML, and append it to the masterHtml, 
    //this is a series of child elements to the someHtml variable above
    $.ajax({
        url: "http://thisisanexample/+ " + nextThingUrl,
        type: "GET",
        asynch: false,
        contentType: "application/json;odata=verbose",
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function (data) {
            successHandlerChildren(data);
        },
        error: function (data) {

        }
    });
    jQuery('#magictime').append(masterHtml);
}
}

function successHandlerChildren(data) {
var results = data.d.results;
for (var i = 0; i < results.length; i++) {
    var someMoreHtml = results[i]["someMoreHtml"];
    masterHtml = masterHtml + someMoreHtml;
}
}

我的问题是第一个 ajax 调用总是在发出第二个调用之前完成，因此我得到第一组 HTML，而第二个调用提供了我需要的一些 HTML。这会打乱操作顺序。我缺少什么？蒂亚!!!

Answer 1

异步选项拼写错误，正确的是:

异步:假