Accessing jqXHR object properties from $.get request

Question

I have a simple function that looks like this:

function getURL(url) {
  return $.get(url);
}

Which im calling (somewhere else, specifically in a unit test) as such:

var url = getURL("/page/stuff")
    console.log(url);

So console.log(url) works, and returns statustext/status etc... like it should.

However, how can I access the properties of the jqXHR object. For instance url.status returns undefined.

Is this a loading issue? Whereas im logging before i've truly received the page...if so how come printing off just the url variable returns the object?

Answer 1

how can I access the properties of the jqXHR object. For instance url.status returns undefined.

By accessing it after the request has completed:

var jqxhr = getURL("/page/stuff");

jqxhr.always(function (result) {
    console.log(jqxhr.status);
});

Is this a loading issue? Whereas im logging before i've truly received the page...

Yes.

if so how come printing off just the url variable returns the object?

Because $.get() returns an object that represents the request. But some of its properties are not populated until the request completes.

Answer 2

jQuery.get() is a jQuery promisse, so you have xhr options on the Deferred object.

I think you want this:

var _request = function( url ) {
    return $.get( url );
};

_request('https://httpbin.org/get').done(function( data, textStatus, jqXHR ) {
    console.info( jqXHR.status );
});

More information here: https://api.jquery.com/jQuery.ajax/#jqXHR