jQuery / Ajax和何时/完成/承诺混乱

Question

我正在尝试完成以下任务：1）获取数据的某些源并“对其进行处理”。 2）从其他来源获取数据并“使用它来做某事”。 3）数据获取最好以异步方式运行（同时，即第二个不应等待第一个完成）。 4）当两者都完成时，将运行一些业务逻辑-但仅当它们完成时才运行。

我创建了一个小JSFiddle，以显示我认为这是如何工作的-但不幸的是，它没有：a）datafetching调用是按顺序执行的。 b）上面第4步的业务逻辑在数据获取甚至开始之前就已执行...

在这里提琴： https : //jsfiddle.net/LeifFrederiksen/emttmhm7/

$.when(
    getOneThing(),
    getAnotherThing()
).done(
    function() {
        console.log("Got it all");
        $("#Output").append("<BR>Got it all");
    }
);

function getOneThing() {
   commonFunctionToGetStuff("oneKindOfThings",renderOneKindOfThings);
}

function getAnotherThing() {
   commonFunctionToGetStuff("anotherKindOfThings",renderAnotherKindOfThings);
}

function commonFunctionToGetStuff (listTitle,successFunction) {
    var url = "https://httpbin.org/get";

    $.ajax({
        url: url,
        type: "GET",
        headers: { "accept": "application/json;odata=verbose" }
    }).success(function (data) {
        console.log("Calling renderfunction for " + listTitle);
        $("#Output").append("<BR>Calling renderfunction for " + listTitle);
        successFunction(data);
        console.log("Back from renderfunction for " + listTitle);
        $("#Output").append("<BR>Back from renderfunction for " + listTitle);
    });
}

function renderOneKindOfThings(data) {
    // Do something with the data...
    console.log("Doing oneKindOfThings.");
    $("#Output").append("<BR>Doing oneKindOfThings.");
}

function renderAnotherKindOfThings(data) {
    // Do something with the data...
    console.log("Doing anotherKindOfThings.");
    $("#Output").append("<BR>Doing anotherKindOfThings.");
}

非常感谢您提供任何清理结构的帮助。

我需要维护执行实际Ajax调用的函数是通用的结构，并且可以通过带有参数的简单包装函数来调用它，这些参数控制要使用的数据源-如示例中的示例:-)

问候雷夫

Answer 1

您需要从commonFunctionToGetStuff方法和调用它的方法中返回承诺。 否则，您会将undefined传递到when函数中，该函数将立即执行done-callback。 另外，您还有一些错误的回调名称（已done ， then success ，未success ）。

function getOneThing() {
   return commonFunctionToGetStuff("oneKindOfThings",renderOneKindOfThings);
}

function getAnotherThing() {
   return commonFunctionToGetStuff("anotherKindOfThings",renderAnotherKindOfThings);
}

function commonFunctionToGetStuff (listTitle,successFunction) {
    var url = "https://httpbin.org/get";

    return $.ajax({...})
            .then(function (data) { ...});
}