尽管返回了承诺，但 Ajax 承诺错误“无法读取未定义的属性 'then'”

Question

我正在尝试使用一个函数通过 3 个 ajax 调用来初始化数据，当这个函数完成后，我想对数据做一些事情。我必须等待完成 3 次 ajax 调用才能返回承诺。问题是，如果我等待完成 3 个 ajax 调用（使用 $.when (ajax1, ajax2, ajax3).done(...)），我会收到错误“无法读取未定义的属性 'then'”

这是我的代码

function myInit() {
    initData().then(function() {
        console.log("a");
    });
}

function initData() {
    var results = {
        categories: [],
        commandes: [],
        users: []
    };
    var ajaxCategories = $.ajax({
        url: url + '/categorie/getAll',
        success: function(data) {
            results.categories = data;
        }
    });

    var ajaxCommandes = $.ajax({
        url: url + '/statistique/getSimpleCommandes',
        success: function(data) {
            results.commandes = data;
        }
    });
    var ajaxUsers = $.ajax({
        url: url + '/statistique/getSimpleUsers',
        success: function(data) {
            results.users = data;
        }
    });
    $.when(ajaxUsers, ajaxCommandes, ajaxCategories)
        .done(function() {
            results.commandes.forEach(function(commande) {
                results.users.forEach(function(user) {
                    if (user.id == commande.user)
                        commande.user = user.nom;
                });
            });
            return $.Deferred().resolve();
        });
}

我在 $.when 中返回了一个承诺。如果我将此返回移到时间之外，它可以正常工作，但是我冒着退出函数并在未加载数据的情况下继续我的代码的风险。我的错在哪里？

Answer 1

从done 的回调中返回一个承诺不会使initData 函数返回任何内容。

在$.when 调用之外创建promise，以便您可以在回调中解决它并从initData 返回它：

var promise = $.Deferred();
$.when(ajaxUsers, ajaxCommandes, ajaxCategories)
    .done(function(){
        results.commandes.forEach(function(commande){
            results.users.forEach(function(user){
                if (user.id == commande.user)
                    commande.user = user.nom;
            });
        });
        promise.resolve();
    });
return promise.promise();

或者，返回 done 返回的承诺：

return $.when(ajaxUsers, ajaxCommandes, ajaxCategories)
    .done(function(){
        results.commandes.forEach(function(commande){
            results.users.forEach(function(user){
                if (user.id == commande.user)
                    commande.user = user.nom;
            });
        });
    });

使用done 方法添加的处理程序按照它们添加的顺序被调用，因此调用者添加的任何处理程序都将在您的处理程序之后运行。

如果您想在返回的 Promise 中传递来自 done 处理程序的数据，请在 resolve 调用中发送：

var promise = $.Deferred();
$.when(ajaxUsers, ajaxCommandes, ajaxCategories)
    .done(function(){
        results.commandes.forEach(function(commande){
            results.users.forEach(function(user){
                if (user.id == commande.user)
                    commande.user = user.nom;
            });
        });
        promise.resolve(results);
    });
return promise.promise();

Answer 2

initData() 不返回承诺，因为该函数中没有 return 语句。你需要回报$.when给你的承诺。

还要链接一个动作并从回调中返回一些东西，你需要使用.then 而不是.done：

function initData() {
    var results = {
        categories: [],
        commandes: [],
        users: []
    };
    var ajaxCategories = $.ajax({
        url: url + '/categorie/getAll',
        success: function(data) {
            results.categories = data;
        }
    });

    var ajaxCommandes = $.ajax({
        url: url + '/statistique/getSimpleCommandes',
        success: function(data) {
            results.commandes = data;
        }
    });
    var ajaxUsers = $.ajax({
        url: url + '/statistique/getSimpleUsers',
        success: function(data) {
            results.users = data;
        }
    });
    return $.when(ajaxUsers, ajaxCommandes, ajaxCategories)
//  ^^^^^^
    .then(function() {
//   ^^^^
        results.commandes.forEach(function(commande) {
            results.users.forEach(function(user) {
                if (user.id == commande.user)
                    commande.user = user.nom;
            });
        });
        return results; // I guess that is what you wanted
    });
}

您甚至可以通过不使用全局 results 变量来进一步推进这一点，而是将其设置为回调的本地变量：

function initData() {
    return $.when(
        $.get(url + '/categorie/getAll'), 
        $.get(url + '/statistique/getSimpleCommandes'),
        $.get(url + '/statistique/getSimpleUsers')
    ).then(function(categoriesRes, commandesRes, userRes) {
        var results = {
            categories: categoriesRes[0],
            commandes: commandesRes[0],
            users: userRes[0]
        };
        results.commandes.forEach(function(commande) {
            results.users.forEach(function(user) {
                if (user.id == commande.user)
                    commande.user = user.nom;
            });
        });
        return results;
    });
}