简体   繁体   中英

Check if function is jQuery ajax request

I am writing an ajax queue and I want to ensure that the type of function (comes in an object) is in fact an ajax request so that .done/.fail/.always can be called on it. How can I do this?

I want to ensure that the type of function (comes in an object) is in fact an ajax request so that .done/.fail/.always can be called on it.

jQuery ajax request objects ( jqXHR ) aren't functions. In jQuery v1.12.0 (the version I had handy to check), they're plain objects with properties added (eg, no special constructor), so you can't use instanceof to see if they're jqXHR objects.

You can test whether done , fail , and/or always are present on the object you get:

if (obj.done && obj.fail && obj.always) {
    // It's probably a jqXHR
}

Or if you wanted to be more thorough you might make sure they were functions:

if (typeof obj.done == "function" &&
    typeof obj.fail == "function" &&
    typeof obj.always == "function") {
    // It's probably a jqXHR
}

This is an example of "duck typing": It quacks like a duck, so we'll assume it's a duck.

If you want to really limit it as much as you can to jqXHR objects and not other things that have those functions, you could check for other functions/properties that they have, such as getAllResponseHeaders and such.

I've used this before:

if(data && $.isFunction(data.promise)) {
...
}

I want to ensure that the type of function (comes in an object) is in fact an ajax request so that .done/.fail/.always can be called on it.

From the jQuery.ajax() documentation:

The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise (see Deferred object for more information).

Available Promise methods of the jqXHR object include:

jqXHR.done(function( data, textStatus, jqXHR ) {}); An alternative construct to the success callback option, the .done() method replaces the deprecated jqXHR.success() method. Refer to deferred.done() for implementation details.

jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {}); An alternative construct to the error callback option, the .fail() method replaces the deprecated .error() method. Refer to deferred.fail() for implementation details.

jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });* An alternative construct to the complete callback option, the .always() method replaces the deprecated .complete() method.

Related question/answers:

  1. Any way to check whether a variable is a real jqXHR?
  2. How can I tell if an object is a jQuery Promise/Deferred?

Checking if something is a promise, or in jQuery's case a Deferred, can be done by checking that the object is "thenable" , ie that it has a then() method

var xhr = $.ajax({url:'...'});

if (typeof xhr === 'object' && typeof xhr.then === 'function') ...

This would work with any promises (also A+), to specifically check for the fail , done and always methods that a jQuery ajax call always would have, see TJ's answer.

Try checking for status property, calling .state() function

if (object.status && (obj.state() === "resolved" || obj.state() === "rejected")) {
      if (obj.status === 200) obj.done(success)
      else obj.fail(err)
} else {
  // do other stuff
}

alternatively, use .ajaxComplete() , which should be called at completed $.ajax() requests

All ajaxComplete handlers are invoked, regardless of what Ajax request was completed. If you must differentiate between the requests, use the parameters passed to the handler. Each time an ajaxComplete handler is executed, it is passed the event object, the XMLHttpRequest object, and the settings object that was used in the creation of the request.

$(document).on("ajaxComplete", function(event, xhr, settings) {
   // do stuff
})

Old question but I think all those answers are pretty unsatisfying. If someone in the future really wants to check if a passed object is a Promise try this function.

function isPromise (obj) {
    const normal = !!obj && typeof obj === 'object' &&
                   ((obj.constructor && obj.constructor.name === 'Promise') || typeof obj.then === 'function');

    const fnForm = !!obj  && (typeof obj === 'function') && 
                   ((obj.name === 'Promise') || (typeof obj.resolve === 'function') && (typeof obj.reject === 'function'));

    return normal || fnForm;
}

works with ES6 promises, Bluebird and jQuery ajax.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM