How to call .fail() from inside .done() to handle general errors?

Question

jQuery's AJAX .fail() is a nice error handler that handles "404 Not Found" errors and such, but how can we call it deliberately from inside .done() to handle general error cases, for example when data provided by user is incorrect?

Answer 1

You can use a common function that's called on error in each case.

$.ajax( 'url' )
    .done( function( data, textStatus, jqXHR ) {
        if( data == 'Invalid' ) {
            ajaxError( jqXHR, "usererror" );
        }
    })
    .fail( ajaxError );

function ajaxError( jqXHR, textStatus, errorThrown ) {
    console.log( 'Ajax error: ' + textStatus );
}

Answer 2

@Juhana's code will be good for most eventualities.

If, however, errors might arise that cannot be reliably predicted by inspection of data alone, then consider this variant :

$.ajax( 'url' ).done( function( data, textStatus, jqXHR ) {
    try {
        var dataLooksGood = ......;//(boolean) Test data for predictable data errors here
        if( !dataLooksGood ) throw( new Error("data invalid"); )
        //Handle data here.
        //Any naturally-ocurring errors or further manually-thrown errors will be caught below.
    }
    catch(err) {
        ajaxError( jqXHR, "AJAX successful but: " + err.message );
    }
}).fail( ajaxError ).always(function() {
    //Here do whatever is necessary after success or error
});


function ajaxError( jqXHR, textStatus, errorThrown ) {
    console.log( 'AJAX error: ' + textStatus );
}

By catching errors, the always handler will be allowed to fire even if an unpredicted error occcurs. Thus you could better guarantee that a "loading..." message or spinner graphic was killed regardless of an error having occurred.