将 $.Deferred() 与嵌套的 $.each 语句一起使用

Question

我正在使用 SharePoint 进行 JSOM 调用。我需要得到结果并且在检索到所有数据之前不要继续前进。我已经尝试了很多示例（没有一个足够完整，我无法理解如何使用嵌套的 $.each 循环语句来解决我的问题。我似乎接近了，但没有任何东西可以正常工作。

我已经编辑了我的实际代码（减去从另一个页面传入的前 3 个变量）以合并 Tomalak 的工作，以便我们可以更好地解决它。目前，结果出现了空对象。试图弄清楚我做错了什么。

[2018 年 8 月 6 日编辑] 终于让它工作了。我发现提供的代码只有两个小问题:-)。我会尝试加粗它们。

var fya = [2008,2009]; //Fiscal Year Array which we use to know what lists to look at
var assignedRecords = []; //Global Reusable Variable
var assignedCourses = ['Math','Science','Reading']; //There might not be records who are associated with a particular course in each list. Wee need to pull the student records (assignedRecords) assoiciated with the above in 2008 and 2009.

SP.ClientContext.prototype.executeQueryPromise = function (items) {
    var result = $.Deferred();
    this.load(items);
    this.executeQueryAsync(function (sender, args) { result.resolve(items) }, 
        function (sender, args) { result.reject(args) });
    return result.promise();
};

移动'var arr = [];'在 arrayFromCollection 之外 在同一函数的 e 变量中添加 'var'

var arr = [];
function arrayFromCollection(coll) {
    var e = coll.getEnumerator();
    while (e.moveNext()) arr.push(e.get_current());
    return arr;
};

function queryListPromise(title, course) {
    var list = hostWeb.get_lists().getByTitle(title);
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where>'
        + '<Eq><FieldRef Name="Course"/><Value Type="Text">' + course + '</Value></Eq>'
        + '</Where></Query></View>');
    return context.executeQueryPromise(list.getItems(camlQuery)).then(arrayFromCollection);
};

function GetAssignedApplications() {
    assignedRecords = []; //Need to start empty
    var myCourses = assignedCourses;

    $.each(myCourses, function (i, myCoursesItem) {
        var courseName = myCoursesItem.get_lookupValue();

将“$.forEach”更改为“$.each”

        $.each(fya, function (n, fyaItem) {
            var listTitle = "FY" + String(fyaItem).substring(2); //FY18 & FY19 are the names of the actual lists.
            assignedRecords.push(queryListPromise(listTitle, courseName));
        });
    });

    $.when(assignedRecords).then(function (results) {
        return Array.prototype.concat.apply([], results);
    }).then(function (items) {
        items.forEach(function (item) {
            var a = item; //item is empty and this actually runs before arrayFromCollection and it returns duplicate records (4) when there is only 2.
        });
    }).fail(onError);
};

Answer 1

首先，在 jQuery 中等待多个 Promise 是通过 $.when() 完成的。

$.when(p1, p2, p3).then(function (results) {
    // results is an array of length 3
});

为了使用可变参数计数，我们使用Function#apply：

var promises = [p1, p2, p3]; // could be be of any length now

$.when.apply($, promises).then(function () {
    var results = [].slice.call(arguments);
    // results is an array of the same length as promises
});

为了使其可重用，我们称之为$.whenAll：

$.whenAll = function (promises) {
    return $.when.apply($, promises).then(function () {
        return [].slice.call(arguments);
    });
};

现在我们可以这样做了：

$.whenAll([p1, p2, p3]).then(function (results) {
    // results is an array of length 3
});

---

接下来，我们需要将基于回调的executeQueryAsync() 变成基于promise 的函数。一般来说，promisification 遵循以下方案：

function somethingPromise(args) {
    var result = $.Deferred();
    somethingAsync(/* onSuccess */ result.resolve, /* onError */ result.reject);
    return result.promise();
}

这期望 onSuccess 和 onError 处理程序接收数据作为参数。 executeQueryAsync 不是这种情况 - 它直接修改 items。但是，我们仍然想用items 解决承诺，所以我们需要明确地这样做。

让我们立即将其粘贴到 SP.ClientContext 原型上以供重复使用。

SP.ClientContext.prototype.executeQueryPromise = function (items) {
    var result = $.Deferred();
    this.load(items);
    this.executeQueryAsync(
        function (sender, args) { result.resolve(items); },
        function (sender, args) { result.reject(args); }
    );
    return result.promise();
};

---

接下来我们应该设置一个助手，将那些笨拙的集合变成可用的东西。

function arrayFromCollection(coll) {
    var arr = [], e = coll.getEnumerator();
    while (e.moveNext()) arr.push(e.get_current());
    return arr;
}

---

所有这些都完成后，我们可以提取一个函数，该函数接受一个标题并返回一个项目数组的承诺。

function queryListPromise(title) {
    var list = web.get_lists().getByTitle(title);
    var q = new SP.CamlQuery();
    //...
    return ctx.executeQueryPromise(list.getItems(q)).then(arrayFromCollection);
}

---

最后，既然您想要一个平面的项目列表，我们应该从一个平面的查询列表开始：

function GetNextFunction() {
    var queries = [];

    // build flat list of queries
    $.each(arr1, function(i, arr1Item) {
        $.each(arr2, function(n, arr2Item) {
            queries.push(queryListPromise(arr2Item));
        });
    });

    // wait on all queries
    $.whenAll(queries).then(function (results) {
        // flatten incoming array of arrays
        return Array.prototype.concat.apply([], results);
    }).then(function (items) {
        // items contains all items from all queries
        items.forEach(function (item) { /* ... */ });
    }).fail(onError);
}

这里queries 变成了一个扁平的promise 数组，每个promise 都会解析为一个item 数组。因此，results 将是一个项目数组。