$ .when.apply.done返回不同​​的结果，具体取决于数组的大小是一个还是多个

Question

我正在寻找关于执行多个ajax调用然后结合结果的最佳方法的一些建议。我的问题是，根据when函数的文档，当有多个参数而不是单个参数时，它将以不同的方式映射结果参数。 https://api.jquery.com/jquery.when/

这导致代码如下所示。检查对我来说似乎很难看，据我所知，每次使用$ .when.apply时都需要这样做。有没有办法将一个延迟数组传递给when函数，以便输出具有一致的形状？

//Returns an array of promises that are simple ajax get requests
var getEventFramesPromises = self.webServiceAdapter.getEventFrames(distinctEventFramePaths);
$.when.apply($, getEventFramesPromises).then(function () {
            var eventFrames;
            //Now "arguments" will either be an array with three arguments it the length of the getEventFramesPromises ===1
            if (getEventFramesPromises.length === 1) {
                eventFrames = [arguments[0]];
            } else {
            //Or it will be an array of arrays where each item in the array represents a deferred result
                eventFrames = _.map(arguments, function (args) {
                    return args[0];
                });
            }});

Answer 1

jQuery $.when()可能是jQuery集中设计最差的API。它不仅根据您传递的内容返回不同的数据类型，而且甚至不接受数组作为参数，这是使用它的最常见和最灵活的方式。我建议的是一个简单的包装器“修复”设计是否一致：

// Takes an array of promises and always returns an array of results, even if only one result
$.all = function(promises) {
    if (!Array.isArray(promises)) {
        throw new Error("$.all() must be passed an array of promises");
    }
    return $.when.apply($, promises).then(function () {
        // if single argument was expanded into multiple arguments, then put it back into an array
        // for consistency
        var args = Array.prototype.slice.call(arguments, 0);
        if (promises.length === 1 && arguments.length > 1) {
            // put arguments into an array for consistency
            return [args];
        } else {
            return args;
        }
    });
};

而且，这是一个稍微不同的实现，它还采用$.ajax()解析的三个元素数组，并使其成为单个数据值，因此您的解析值只是单个元素结果的简单数组：

// jQuery replacement for $.when() that works more like Promise.all()
// Takes an array of promises and always returns an array of results, even if only one result
$.all = function (promises) {
    if (!Array.isArray(promises)) {
        throw new Error("$.all() must be passed an array of promises");
    }
    return $.when.apply($, promises).then(function () {
        // if single argument was expanded into multiple arguments, then put it back into an array
        // for consistency
        var args = Array.prototype.slice.call(arguments, 0);
        var returnVal;
        if (promises.length === 1 && arguments.length > 1) {
            // put arguments into an array for consistency
            returnVal = [args];
        } else {
            returnVal = args;
        }
        // now make Ajax results easier to use by making it be just an array of results, not an array of arrays
        // 
        return returnVal.map(function(item) {
            // see if this looks like the array of three values that jQuery.ajax() resolves to
            if (Array.isArray(item) && item.length === 3 && typeof item[2] === "object" && typeof item[2].done === "function") {
                // just the data
                return item[0];
            } else {
                return item;
            }
        });
    });
};

Answer 2

不确定这个问题为什么会被投票。我认为这个问题是合理的，我指的是有问题的文件。所以我最终接受了Kevin的建议并编写了一个快速辅助函数，该函数将提取jquery调用的结果，同时考虑到数组中只有一个值时的行为。

function extractValuesFromPromises() { 
        if (arguments.length === 3 && typeof arguments[2].then === 'function') {
            return [arguments[0]];
        } else {
            return _.map(arguments, function (args) {
                return args[0];
            });
        } 
    }

然后在您的代码中，您可以执行此操作....

var getEventFramesPromises = self.webServiceAdapter.getEventFrames(distinctEventFramePaths);
        $.when.apply($, getEventFramesPromises)
            .then(extractValuesFromPromises)
            .then(function (eventFrames) {
                //Do whatever with ajax results
});