为什么在运行成功回调之前解决承诺？答案

【问题标题】：Why are promises being resolved before success callbacks are run?为什么在运行成功回调之前解决承诺？
【发布时间】：2015-07-29 00:26:36
【问题描述】：

所以我的代码看起来像这样

var addExpenses = function(parent) {
    return function(data) {
        if (data) {
            for (var i = 0; i < data.length; i++) {
                var expenditure = data[i].RestrictedExpenditure;
                expenditure = parseFloat(expenditure);
                var child = {level: 4, name: data[i].Name, size: expenditure, children: []};
                parent.children.push(child);
            }
        }
    }
}

var addSubActivities = function(parent) {
    return function(data) {
        if (data) {
            for (var i = 0; i < data.length; i++) {
                var expenditure = data[i].Expenditure;
                expenditure = parseFloat(expenditure);
                if (expenditure < 0) {
                    expenditure = -expenditure;
                }
                var child = {level: 3, name: data[i].Name, size: expenditure, children: []};
                parent.children.push(child);
                subActivitiesDfds.push($.getJSON("http://localhost:8080/district/1/subActivities/" + data[i].Code + "/expenses", addExpenses(child)));
                // subActivitiesDfds.push(dfd);
            }
        }
    }
}

for (var i = 0; i < data.length; i++) {
    var expenditure = data[i].Expenditure;
    expenditure = parseFloat(expenditure);
    total += expenditure;
    var child = {level: 2, name: data[i].Name, size: expenditure, children: []};
    root.children.push(child);

    subActivitiesDfds.push($.getJSON("http://localhost:8080/district/1/activities/" + data[i].Code + "/subActivities", addSubActivities(child)));
    // subActivitiesDfds.push(dfd);
}
root.size = total;


$.when.apply($, subActivitiesDfds).done(function() {

var 节点 = partition.nodes(root); //渲染

我在这一行得到一个错误 -

parent.children.push(child);

子代未定义。发生这种情况是因为 partition.nodes(root) 破坏了 parent 属性，这是因为在调用 addExpenses 回调之前解决了 Promise 列表。

为什么？

【问题讨论】：

在调用成功回调之前解决承诺通常不是真的。我举了一个$.getJSON() jsFiddle 的工作示例，并将console.log() 添加到成功处理程序和承诺.then() 解决处理程序中，成功处理程序在这里首先被明确调用：jsfiddle.net/gba10h8o。所以，你的代码中肯定有其他事情发生。

标签： javascript jquery promise jquery-deferred

【解决方案1】：

出现问题是因为在执行 $.when.apply($, subActivitiesDfds) 时，subActivitiesDfds 仅填充了顶级承诺。为下一级生成 Promise 的代码仅在顶级 Promise 实现时运行。

要修复，您需要：

确保addSubActivities() 在所有处理完成后返回一个承诺。
在两个地方用$.getJSON(..., fn) 替换$.getJSON(..., ).then(fn)。

您还会发现array.map() 可以方便地构建承诺数组。

试试：

var addExpenses = function(parent) {
    return function(data) {
        if (data) {
            for (var i = 0; i < data.length; i++) {
                var child = {
                    level: 4, 
                    name: data[i].Name, 
                    size: parseFloat(data[i].RestrictedExpenditure),
                    children: []
                };
                parent.children.push(child);
            }
        }
    }
}

var addSubActivities = function(parent) {
    return function(data) {
        if (data) {
            var promises = data.map(function(item) {
                var child = {
                    level: 3,
                    name: item.Name,
                    size: Math.abs(parseFloat(item.Expenditure)),
                    children: []
                };
                parent.children.push(child);
                return $.getJSON("http://localhost:8080/district/1/subActivities/" + item.Code + "/expenses")
                .then(addExpenses(child));
            });
            return $.when.apply($, promises);
        } else {
            return $.when();//resolved promise
        }
    }
}

var promises = data.map(function(item) {
    var child = {
        level: 2,
        name: item.Name,
        size: parseFloat(item.Expenditure),
        children: []
    };
    root.children.push(child);
    total += child.size;
    return $.getJSON("http://localhost:8080/district/1/activities/" + item.Code + "/subActivities").then(addSubActivities(child));
});
root.size = total;

$.when.apply($, promises).then(function() {
    var nodes = partition.nodes(root); //render
});

顶级promises 数组仍然只填充顶级承诺，但现在链式.then()s 确保每个承诺只有在其所有同步和异步子活动完成时才会结算。

【讨论】：