如何扩展 JQuery 的 ajax done() 方法？

Question

我有一个这样的 jQuery ajax 函数：

jQuery.ajax({
            url : '/blabla',
            method : 'post',
            data: {
                bla : bla
            }
        }).done(function(data) {
            // do lots of stuff
        });

.. 并且我希望能够添加检查传递给完成回调函数的数据中没有 session_timed_out 值。假设我有许多与上面类似的功能，但它们都做不同的事情，但它们都需要先检查会话是否超时。是否有适当的方法来扩展 done() 以便它最初检查超时？我试图做这样的事情，但失败了：

var myAjax = function(options,callback){ 
    var defaults = {              
        done: function(data){  //hijack the success handler?
            if(check(data)){    
                callback(data); 
            }
        }
    };
    jQuery.extend(options,defaults);  
    return jQuery.ajax(options); 
}

当我使用这个扩展函数时，它像以前一样工作，这意味着检查永远不会被调用，因为它似乎被实际实现中的 done() 回调所取代，我想这是有道理的。所以我想知道是否有办法“装饰”或扩展 done() 函数，以便它首先检查会话超时。或者我是否需要手动将相同的会话检查添加到我所有的 ajax 完成中？

Answer 1

这个 sn-p 覆盖了 jQuery ajax 方法，因此您可以在它成功返回时添加额外的检查。

(function($) {

    var yourCustomCheck = function(ajaxRes) {
        // Do whatever you need and return a boolean
    };

    var oldAjax = $.ajax;
    $.ajax = function(opts) {
        return $.Deferred(function() {
            var _def = this;

            oldAjax.call(this, opts).done(function(res) {
                console.log("this is done first");
                if(yourCustomCheck.call(this, res)) _def.resolve(res);
                else _def.reject("timeout");
            }).fail(function() {
                _def.reject();
            });
        })
    }

})(jQuery);

之后就可以正常使用$.ajax()了..

$.ajax({
    .....
}).done(function(res) {
    console.log("ok");
}).fail(function() {
    console.log("no ok");
});

这是一个带有工作示例的 jsfiddle：https://jsfiddle.net/jormaechea/kffyo7qL/1/

Answer 2

你可以链接一个超时检查器：

   jQuery.ajax({
        url : '/blabla',
        method : 'post',
        data: {
            bla : bla
        }
    }).then(timeoutCheck).then(function(data) {
        // do lots of stuff
    }, function(err) {
        // handle error
    });

    function timeoutCheck(data) {
        if (check(data)) {
           return data;
        } else {
           // return a rejected promise to turn fulfilled into reject
           return jQuery.Deferred.reject(new Error("timeout"));
        }
    }

---

或者，您可以将其放入您自己的 ajax 包装器中。

jQuery.ajaxT = function() {
     return jQuery.ajax.apply(jQuery, arguments).then(timeoutCheck);
}

jQuery.ajaxT(...).then(function(results) {
    // handle returned data here
    // the timeoutCheck has already been done
}, function(err) {
    // handle any errors here
});

然后，您使用jQuery.ajaxT() 发起的任何 ajax 调用都会自动将 timeoutCheck 添加到它的承诺逻辑中。如果 ajax 调用成功并且超时检查通过，那么 Promise 就实现了。如果 ajax 调用成功，超时检查失败，则 Promise 被拒绝。