Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>(<strong>UPDATE:</strong> Please note that currently jQuery Promises are not compatible with the <a href="http://promises-aplus.github.io/promises-spec/" rel="nofollow noreferrer">Promises/A+ specification</a> - more info in <a href="https://stackoverflow.com/questions/5316697/jquery-return-data-after-ajax-call-success/5316805#5316805">this answer</a>.)</p> <p>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:</p> <pre><code>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; } </code></pre> <p>Now anyone will be able to use it like any promise like this to your function:</p> <pre><code>var request = makerequest(); request.done(successCallback); request.fail(errorCallback); </code></pre> <p>Or even just:</p> <pre><code>makerequest().then(successCallback, errorCallback); </code></pre> <p>If you also add this:</p> <pre><code> promise.success = promise.done; promise.error = promise.fail; </code></pre> <p>then your caller will have (maybe more familiar) interface of .success() and .error() like with pure $.ajax() calls:</p> <pre><code>var request = makerequest(); request.success(successCallback); request.error(errorCallback); </code></pre> <p>(The implementation of .complete() is left as an exercise for the reader.)</p> <p>See this demos:</p> <ul> <li><a href="http://jsfiddle.net/_rsp/r2YnM/" rel="nofollow noreferrer">http://jsfiddle.net/_rsp/r2YnM/</a></li> <li><a href="http://jsfiddle.net/_rsp/r2YnM/1/" rel="nofollow noreferrer">http://jsfiddle.net/_rsp/r2YnM/1/</a> (more verbose)</li> </ul> <p>Here's another example pulled directly from a working project:</p> <pre><code>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; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload