Search code examples
javascriptjqueryxmlhttprequest

jquery post - unexpexted XHR in promise

I experience that when calling the same url xhr in the promise returns different objects

enter image description here

In the print screen of the console the first two lines are the first request (which returns HTTP 422). The XHR is the xhr object as expected

The last two lines are the next request (which returns HTTP 200) but now the XHR object is the actual response? Why is that?

I have been pulling my hair out and can't really understand why that is happening? I'm just calling a jquery post. What can inflict that? I'm not doing anything fancy on the frontend with jquery. Just using the native $.post without extending anything

I can't really see what I can do on the backend to change the XHR object to the response in jquery?

$.post(url, post).always(xhr=>{
    const res = xhr.responseText ? JSON.parse(xhr.responseText) : [];
    console.log('xhr', xhr)
    console.log('res',res)
});
Solution

  • Read jQuery documentation please:

    Note: The deferred.always() method receives the arguments that were used to .resolve() or .reject() the Deferred object, which are often very different. For this reason, it's best to use it only for actions that do not require inspecting the arguments. In all other cases, use explicit .done() or .fail() handlers since the arguments will have well-known orders.

    Read also about AJAX shortcuts, here you'll find a proper code example: https://api.jquery.com/category/ajax/shorthand-methods/

    var jqxhr = $.get( "example.php", function() {
  alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });

    You shouldn't use always() for UI/business logic, only for the UI cleaning like removing your loaders. Use the first or seconds callbacks from the snippet when you want to do some things after your POST call is successful.