javascript - Ajax并行发帖: Define timeout for each request and get only suceeded

Question

我的问题是，当我们使用 jquery 延迟接口(interface)时，有一种方法可以为每个并行 ajax post 定义超时。例如

parallelPost: function(toUrl1, toUrl2, theData1, theData2, contentType, dataType, successHandler, errorHandelr, completeHandler) {

$.when($.ajax(this.createAjaxCall(toUrl1, theData1, true, headers, 'POST', contentType, dataType,1000)),
               $.ajax(this.createAjaxCall(toUrl2, theData2, true, headers, 'POST', contentType, dataType,2000))).done(function(res1, res2) {
                successHandler(res1, res2);
            }, errorHandelr, completeHandler);
        },
        createAjaxCall: function(toUrl, theData, isAsync, headers, verb, contentType, dataType, timeout, successHandler, errorHandelr, completeHandler) {
            return {
                url: toUrl,
                cache: false,
                type: verb,
                data: theData,
                dataType: dataType,
                timeout: timeout || 0,
                async: isAsync,
                headers: headers,
                contentType: contentType ? contentType : 'application/x-www-form-urlencoded',
                success: successHandler,
                error: errorHandelr,
                complete: completeHandler
            };
        }

每个并行帖子的超时定义为 1000 和 2000。我的目标是获得在定义的超时中成功的响应。因此，当第一个请求超时而第二个请求未超时时，则仅返回第二个响应。

通过 jquery 延迟接口(interface)，如果至少有一个超时失败回调就会被调用。

是否有一种方法可以定义此类行为，或者可能是另一个提供问题解决方案的接口(interface)

Answer 1

我会这样做......

首先，要了解一般原则，请阅读 this answer .

现在，以可链接 .jqXhrReflect() 方法的形式实现 reflect()，该方法返回:

• 成功时:jQuery.ajax success args 捆绑到单个对象中，
• 错误:使用捆绑到单个对象中的 jQuery.ajax 错误参数解决的 promise 。

(function($) {
    if(!$.$P) {
        $.$P = function() {
            return (this instanceof $.$P) ? this : (new $.$P());
        };
    }
    if(!$.$P.prototype.jqXhrReflect) {
        $.$P.prototype.jqXhrReflect = function() {
            /* A promise method that "reflects" a jqXHR response.
             * Delivers, on the success path, an object that bundles :
             * - jqXHR success arguments (data, textStatus, xhr) or 
             * - jqXHR error arguments (xhr, textStatus, errorThrown).
             */
            return this.then(
                function(data, textStatus, xhr) { return { 'data':data, 'textStatus':textStatus, 'xhr':xhr }; },
                function(xhr, textStatus, errorThrown) { return $.when({ 'xhr':xhr, 'textStatus':textStatus, 'errorThrown':errorThrown }); }
            );
        };
    }
})(jQuery);

注意:自定义 jQuery Promise 方法并不直观

然后更改parallelPost()如下:

• 接受现成的 ajax 选项，
• 不接受 successHandler、errorHandelr、completeHandler 参数，
• 过滤 ajax 响应以区分结果和错误。

parallelPost: function(ajaxOptions1, ajaxOptions2) {
    return $.when(
        this.ajaxCall(ajaxOptions1),
        this.ajaxCall(ajaxOptions2)
    ).then(function() {
        var args = Array.prototype.slice.call(arguments);
        // here, apply various filters
        return {
            all: args,
            results: args.filter(function(obj) {
                return obj.data !== undefined;
            }),
            allErrors: args.filter(function(obj) {
                return obj.errorThrown !== undefined;
            }),
            timeouts: args.filter(function(obj) {
                return obj.errorThrown && obj.textStatus === 'timeout';
            }),
            otherErrors: args.filter(function(obj) {
                return obj.errorThrown && obj.textStatus !== 'timeout';
            })
        };
    });
},

然后更改 .createAjaxCall() 以实际执行 ajax 调用并使用上面定义的 .jqXhrReflect() 方法转换响应:

ajaxCall: function(ajaxOptions) {
    var ajaxDefaults = {
        cache: false,
        type: 'POST',
        dataType: 'JSON', // or whatever
        async: false,
        contentType: 'application/x-www-form-urlencoded'
    };
    return $.ajax($.extend(ajaxDefaults, ajaxOptions)) // $.extend does the necessary magic of merging ajaxDefaults and ajaxOptions.
        .promise($.$P()) // make the .jqXhrReflect() method available.
        .jqXhrReflect(); // call the .jqXhrReflect() method.
}

现在你可以打电话了，

myObj.parallelPost(
    { url: 'path/to/resource1', timeout: 1000 },
    { url: 'path/to/resource2', timeout: 2000 }
).then(function(outcomes) {
    // this success callback is guaranteed to fire and will make the following available :
    // array outcomes.all
    // array outcomes.results
    // array outcomes.allErrors
    // array outcomes.timeouts
    // array outcomes.otherErrors
});