jQuery Exception Handling and catch block

Question

I am attempting to deal with errors that are returned by an API I am calling by jQuery.ajax().

If the error has an HTTP Status >= 500, I want to do some specific actions, otherwise I want to leave it to the calling routine to handle the exception.

So - I have code that looks like this :

        function deleteClient() {
        $('#deleteclienterrorpara').css('visibility', 'hidden');

        utils.deleteViaApi("/api/client/v1/client/" + ns.currentClientId)
        .then(function () {
            utils.closeModal("#clientMaintenance","/#/locateclient");
            utils.showInformationMessage("child deleted successfully");
        })
        .catch(function(error){

            $('#deleteclienterror').text(error.responseJSON.error.message);
            $('#deleteclienterrorpara').css('visibility', 'visible');
            $("#deleteclienterrorpara").addClass("error");
        });
    }

Where deleteViaApi looks like this :

    const deleteViaApi = function(url){
    let contextDetails = setUpContextDetails(url,"DELETE");
        return new Promise(function(resolve, reject) {
            firebase.auth().currentUser.getIdToken()
                .then(function(idToken) {
                    return {'Authorization': 'Bearer ' + idToken,
                        'ACTING_ON_BEHALF_OF' : ns.actingAs};
                }).then(function(headers) {
                resolve ($.ajax({
                    url: url,
                    type: "DELETE",
                    headers: headers,
                    complete: function(data) {
                        console.log("DELETE at " + url + " completes");
                    },
                    error: function(jqXHR,textStatus,errorThrown){
                        if (jqXHR.statusCode().status >= 500 ) {
                            return error_message(textStatus, errorThrown, jqXHR, contextDetails);
                        } else {
                            throw errorThrown;
                        }
                    }
                }));
            });
        });
};

What I find is that, when the API returns an error in the 500 range, the error handler is called as I expect, and the error_message function is also called. But, I also find that the catch code in deleteClient is also executed. I don't want this to happen, but I can't work out why it's happening, or how to stop it from happening.

score 1 · Accepted Answer · answered Dec 31 '21 at 00:58

1

Avoid the Promise constructor antipattern! And don't use an error handler, which will be ignored for promise purposes, use .catch() instead.

function deleteViaApi(url) {
    let contextDetails = setUpContextDetails(url,"DELETE");
    return firebase.auth().currentUser.getIdToken().then(function(idToken) {
        return {
            'Authorization': 'Bearer ' + idToken,
            'ACTING_ON_BEHALF_OF' : ns.actingAs
        };
    }).then(function(headers) {
        return new Promise((resolve, reject) => {
//      ^^^^^^
            $.ajax({
                url: url,
                type: "DELETE",
                headers: headers,
                success: resolve,
                error(jqXHR,textStatus,errorThrown) {
                    reject({jqXHR,textStatus,errorThrown});
                }
            });
        }).finally(function() {
            console.log("DELETE at " + url + " completes");
        }).catch(function({jqXHR,textStatus,errorThrown}){
            if (jqXHR.statusCode().status >= 500 ) {
                return error_message(textStatus, errorThrown, jqXHR, contextDetails);
            } else {
                throw errorThrown;
            }
        });
    });
}

answered Dec 31 '21 at 00:58

Bergi

630,263
148
957
1,375

Oh I forgot how horrible the jQuery `ajax` API is. Error handling is not its strength. – Bergi Dec 31 '21 at 00:59
`$.ajax` support `.then()`. You don't need to wrap it in Promise object. `$.ajax().then().catch()` or async/await `await $.ajax()` – ikhvjs Dec 31 '21 at 07:39
@ikhvjs You can't get the `errorThrown` if you use `Promise.resolve($.ajax())` or `await $.ajax()` – Bergi Dec 31 '21 at 14:22
I see. If OP is using `HTTP/2`, you can leave it empty string instead. From the doc: When an HTTP error occurs, `errorThrown` receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." (in `HTTP/2` it may instead be an empty string). – ikhvjs Jan 06 '22 at 07:54
@ikhvjs I was thinking more of exceptions from the `JSON.parse` call that jQuery does, I think the HTTP status is available on `jqXHR.status` – Bergi Jan 06 '22 at 14:07

jQuery Exception Handling and catch block

1 Answers1