4

在多个 ajax 请求都完成后,无论它们是成功还是错误,如何执行一个函数?

我一直在尝试用来$.when.apply(this, array)传递延迟的 jqXHR 对象数组。但是就像文档说的那样

在其中一个 Deferred 被拒绝的多 Deferred 情况下,jQuery.when 立即 >为其主 Deferred 触发 failCallbacks。请注意,某些 Deferreds 可能仍然>未解决。

如何利用 jQuery 延迟对象始终等待所有 ajax 调用完成?

也许我应该创建自己的延迟来包装所有其他延迟?如果是这样,我不太清楚如何设置。

4

1 回答 1

0

本着 Promise 规范未来如何使用PromiseInspection对象的精神,这里有一个 jQuery 附加函数,它告诉你所有承诺何时完成,无论是履行还是拒绝:

(function() {    
    // pass either multiple promises as separate arguments or an array of promises
    $.settle = function(p1) {
        var args;
        if (Array.isArray(p1)) {
              args = p1;
        } else {
            args = Array.prototype.slice.call(arguments);
        }

        return $.when.apply($, args.map(function(p) {
            // make sure p is a promise (it could be just a value)
            p = wrapInPromise(p);
            // Make sure that the returned promise here is always resolved with a PromiseInspection object, never rejected
            return p.then(function(val) {
                return new PromiseInspection(true, val);
            }, function(reason) {
                // Convert rejected promise into resolved promise by returning a resolved promised
                // One could just return the promiseInspection object directly if jQuery was
                // Promise spec compliant, but jQuery 1.x and 2.x are not so we have to take this extra step
                return wrapInPromise(new PromiseInspection(false, reason));
            });
        })).then(function() {
              // return an array of results which is just more convenient to work with
              // than the separate arguments that $.when() would normally return
            return Array.prototype.slice.call(arguments);
        });
    }

    // utility functions and objects
    function isPromise(p) {
        return p && (typeof p === "object" || typeof p === "function") && typeof p.then === "function";
    }

    function wrapInPromise(p) {
        if (!isPromise(p)) {
            p = $.Deferred().resolve(p);
        }
        return p;
    }

    function PromiseInspection(fulfilled, val) {
        return {
            isFulfilled: function() {
                return fulfilled;
            }, isRejected: function() {
                return !fulfilled;
            }, isPending: function() {
                // PromiseInspection objects created here are never pending
                return false;
            }, value: function() {
                if (!fulfilled) {
                    throw new Error("Can't call .value() on a promise that is not fulfilled");
                }
                return val;
            }, reason: function() {
                if (fulfilled) {
                    throw new Error("Can't call .reason() on a promise that is fulfilled");
                }
                return val;
            }
        };
    }
})();

然后,您可以像这样使用它:

$.settle(promiseArray).then(function(inspectionArray) {
    inspectionArray.forEach(function(pi) {
        if (pi.isFulfilled()) {
            // pi.value() is the value of the fulfilled promise
        } else {
            // pi.reason() is the reason for the rejection
        }
    });
});

请记住,$.settle()将始终履行(从不拒绝)并且履行的值是一个PromiseInspection对象数组,您可以询问每个对象以查看它是履行还是拒绝,然后获取相应的值或原因。有关示例用法,请参见下面的演示:

工作演示:https ://jsfiddle.net/jfriend00/y0gjs31r/

于 2016-03-05T20:57:00.380 回答