jQuery jqXHR - 取消链式调用，触发错误链

I am creating a ajax utility for interfacing with my server methods. I would like to leverage jQuery 1.5+ deferred methods from the object returned from the jQuery.ajax() call. The situation is following.

我正在创建一个ajax实用程序,用于连接我的服务器方法。我想从jQuery.ajax()调用返回的对象中利用jQuery 1.5+延迟方法。情况如下。

The serverside method always returns a JSON object:

serverside方法始终返回JSON对象:

{ success: true|false, data: ... }

{success:true | false,data:...}
The client-side utility initiates the ajax call like this

客户端实用程序启动这样的ajax调用

var jqxhr = $.ajax({ ... });

var jqxhr = $ .ajax({...});

And the problem area:

问题领域:

jqxhr.success(function(data, textStatus, xhr) {
     if(!data || !data.success) { 
         ???? // abort processing, trigger error
     }
});
return jqxhr; // return to caller so he can attach his own handlers

So the question is how to cancel invocation of all the callers appended success callbacks an trigger his error handler in the place mentioned with ???? ?

所以问题是如何取消所有调用者的调用附加成功回调触发他的错误处理程序在提到的地方???? ?

The documentation says the deferred function invocation lists are FIFO, so my success handler is definitely the first one.

文档说延迟函数调用列表是FIFO,所以我的成功处理程序绝对是第一个。

1 个解决方案

#1

(UPDATE: Please note that currently jQuery Promises are not compatible with the Promises/A+ specification - more info in this answer.)

(更新:请注意,目前jQuery Promises与Promises / A +规范不兼容 - 在这个答案中有更多信息。)

In your function where you create the AJAX request you can also create a deferred object and return a promise to the caller after binding its resolve and reject functions to the appropriate callbacks of the $.ajax request with some custom data verification, like this:

在您创建AJAX请求的函数中,您还可以创建一个延迟对象,并在将其解析和拒绝函数绑定到$ .ajax请求的相应回调之后,通过一些自定义数据验证将响应返回给调用者,如下所示:

function makerequest() {

    var deferred = $.Deferred();
    var promise = deferred.promise();

    var jqxhr = $.ajax({
        // ...
    });

    jqxhr.success(function(data, status, xhr) {
        if (!data || !data.success) {
            deferred.reject(jqxhr, 'error');
        } else {
            deferred.resolve(data, status, xhr);
        }
    });

    jqxhr.error(function(jqXHR, status, error) {
        deferred.reject(jqXHR, status, error);
    });

    return promise;
}

Now anyone will be able to use it like any promise like this to your function:

现在任何人都可以像对待你的功能一样使用它:

var request = makerequest();

request.done(successCallback);
request.fail(errorCallback);

Or even just:

甚至只是:

makerequest().then(successCallback, errorCallback);

If you also add this:

如果你还添加这个:

    promise.success = promise.done;
    promise.error = promise.fail;

then your caller will have (maybe more familiar) interface of .success() and .error() like with pure $.ajax() calls:

然后你的调用者将拥有(也许更熟悉).success()和.error()的接口,就像纯$ .ajax()调用一样:

var request = makerequest();

request.success(successCallback);
request.error(errorCallback);

(The implementation of .complete() is left as an exercise for the reader.)

(.complete()的实现留给读者练习。)

See this demos:

看到这个演示:

http://jsfiddle.net/_rsp/r2YnM/
http://jsfiddle.net/_rsp/r2YnM/1/ (more verbose)

http://jsfiddle.net/_rsp/r2YnM/1/(更详细)

Here's another example pulled directly from a working project:

这是从工作项目中直接提取的另一个示例:

function ajax(url, data) {
    var self = this;
    var deferred = $.Deferred();
    var promise = deferred.promise();

    var jqxhr = $.ajax({
        url: url,
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        type: 'POST'
    }).done(function (msg, status, xhr) {
        if (!msg || msg.Error) {
            self.doError(msg.Error);
            deferred.reject(jqxhr, 'error');
        } else {
            deferred.resolve(msg, status, xhr);
        }
    });

    return promise;
}

#1