How to trigger jquery.ajax() error callback based on server response, not HTTP 500?

The error callback will be executed when the response from the server is not going to be what you were expecting. So for example in this situations it:

HTTP 404/500 or any other HTTP error message has been received
data of incorrect type was received (i.e. you have expected JSON, you have received something else).

In your situation the data is correct (it's a JSON message). If you want to manually trigger the error callback based on the value of the received data you can do so quite simple. Just change the anonymous callback for error to named function.

function handleError(xhr, status, error){

    //Handle failure here

 }

$.ajax({

  url: url,
  type: 'GET',
  async: true,
  dataType: 'json',
  data: data,

 success: function(data) {
     if (whatever) {
         handleError(xhr, status, ''); // manually trigger callback
     }
     //Handle server response here

  },

 error: handleError
});

We presume the server is sending JSON, and in case of a successful request we'll get something like this:

{
    success: true,
    data: {
        name: 'Foo'
    }
}

... and on failure:

{
    success: false,
    error: 'Something bad happened.'
}

Then we simply filter the response with a $.Deferred:

$.get('http://localhost/api').then(function(res) {
    var filter = $.Deferred();

    if (res.success) {
        filter.resolve(res.data);
    } else {
        filter.reject(res.error);
    }

    return filter.promise();
}).done(function(data) {
    console.log('Name:',  data.name); // Outputs: Foo
}).fail(function(error) {
    console.log('Error:', error); // Outputs: Something bad happened.
})

The error callback is for when the Ajax round-trip could not be completed successfully, not something based on your server logic. It would be your responsibility to check for what you consider to be a successful response inside the success callback. i.e. Add a single IF conditional that checks if the message = "There was an error." and include your error logic there, otherwise do the success logic.

An approach to do what you ask for would be to have the server return a 404 header when there is an error, then it would be handled by the error callback. The problem with this approach is that you'd be hiding if there are actual errors, and you wouldn't be able to pass additional data with it.

How to trigger jquery.ajax() error callback based on server response, not HTTP 500?

Related

Recent Posts