Executing both JavaScript Promise .then() and .catch concurrently

Question

Executing both JavaScript Promise .then() and .catch concurrently

I've been working on converting my WordPress comments into an ajax-driven system.

Everything was going smoothly until I encountered a problem with the .catch() method triggering right after the .then() method.

Below is the code snippet...

Ajax engine

commentAPI: function(action, encoded, userID) {
    let self = this;

    return new Promise(function (resolve, reject) {
       //console.log("ajax call to " + self.ajaxURL + " with action " + action);

        jQuery.ajax({               
            url: self.ajaxURL,
            type: 'post',
            data: 'action='+action+'&data='+encoded,
            dataType: 'json',
            success: function(data, code, jqXHR) { resolve(data); },
            fail: function(jqXHR, status, err) { console.log('ajax error = ' + err ); reject(err); },
            beforeSend: function() {} //display loading gif
        });
    });
},

The method responsible for handling the comment form submission

handleReplyFormSubmit: function(form) {
    let self = this;

    this.removeErrorHtml(form);

    // Serialize form to name=value string
    const formdata = jQuery(form).serialize();

    // Validate inputs
    // * Wordpress doing this for now and providing error resonse 

    // Encode data for easy sending
    const encodedJSON = btoa( formdata );

    this.commentAPI('dt_submitAjaxComment', encodedJSON).then(function(response){
        console.log('firing then');

        if( response.error == true ) {
            self.printFormError(form, response.errorMsg);
        }

        else { 
            let html = response.commentHTML;
            console.log('html returned' + html)
            jQuery(form).append(html);
            Jquery(form).remove();
        }

    }).catch(function(err) {            
        console.log('firing catch');

        if( err !== undefined && err.length > 0 ) { 
            self.printFormError(form, err);
        }

        else { 
            self.printFormError(form, 'Unkown error');
        }
    });

    return false;
},

The code seems to be functioning as intended, but the catch method is getting triggered unnecessarily, causing frustration with error handling...

https://i.sstatic.net/FNopj.png

It's interesting to see how this part of the code gets executed:

console.log('firing catch')

While this one doesn't (within the ajax fail function):

console.log('ajax error = ' + err );

Am I missing something here?

javascript ajax

Answer 1

Answer №1

Commitments

Oftentimes, a then function is executed first, followed by a catch function later on: indicating that an error occurred within the then handler and triggered the catch function. The catch handlers are executed in the following scenarios:

If there is an error during the asynchronous operation, leading to rejection of the Promise.
If an error occurs in any preceding then handler.

For example, consider the code snippet below:

Promise.resolve()
.then( () => {
  console.log('this will be called');
  throw new Error('bum');
  console.log('this wont be logged');
})
.catch(err => {
  console.log('this will be logged too');
  console.log(err); // bum related error
});

This code will result in logs from both the then and catch handlers being displayed.

Your script

In your then handler, the following code exists:

    else { 
        let html = response.commentHTML;
        console.log('html returned' + html)
        jQuery(form).append(html);
        Jquery(form).remove();
    }

Note the typo where Jquery is used instead of jQuery. This error is likely causing the catch block to execute.

In addition

Newer versions of jQuery return a promise directly from $.ajax(), eliminating the need to wrap it in another promise.

The revised code should look like this:

commentAPI: function(action, encoded, userID) {
    return jQuery.ajax({
        url: this.ajaxURL,
        type: 'post',
        data: 'action='+action+'&data='+encoded,
        dataType: 'json',
        beforeSend: function() {} //display loading gif
    });
},

This way, you can handle success and failure using then and catch directly within the commentApi method, rather than passing callbacks to resolve or reject a wrapping Promise.

Understanding ajax success parameters

The success callback takes three arguments, though Promises typically accept just one argument.

However, jQuery does pass these three arguments to the then handler. So, if necessary, you can access them within the handler as shown below:

this.commentAPI('dt_submitAjaxComment', encodedJSON).then(function(data, code, jqXhr){
 // the three arguments will be accessible here.
...
}

Answer 2

Commitments

Oftentimes, a then function is executed first, followed by a catch function later on: indicating that an error occurred within the then handler and triggered the catch function. The catch handlers are executed in the following scenarios:

If there is an error during the asynchronous operation, leading to rejection of the Promise.
If an error occurs in any preceding then handler.

For example, consider the code snippet below:

Promise.resolve()
.then( () => {
  console.log('this will be called');
  throw new Error('bum');
  console.log('this wont be logged');
})
.catch(err => {
  console.log('this will be logged too');
  console.log(err); // bum related error
});

This code will result in logs from both the then and catch handlers being displayed.

Your script

In your then handler, the following code exists:

    else { 
        let html = response.commentHTML;
        console.log('html returned' + html)
        jQuery(form).append(html);
        Jquery(form).remove();
    }

Note the typo where Jquery is used instead of jQuery. This error is likely causing the catch block to execute.

In addition

Newer versions of jQuery return a promise directly from $.ajax(), eliminating the need to wrap it in another promise.

The revised code should look like this:

commentAPI: function(action, encoded, userID) {
    return jQuery.ajax({
        url: this.ajaxURL,
        type: 'post',
        data: 'action='+action+'&data='+encoded,
        dataType: 'json',
        beforeSend: function() {} //display loading gif
    });
},

This way, you can handle success and failure using then and catch directly within the commentApi method, rather than passing callbacks to resolve or reject a wrapping Promise.

Understanding ajax success parameters

The success callback takes three arguments, though Promises typically accept just one argument.

However, jQuery does pass these three arguments to the then handler. So, if necessary, you can access them within the handler as shown below:

this.commentAPI('dt_submitAjaxComment', encodedJSON).then(function(data, code, jqXhr){
 // the three arguments will be accessible here.
...
}

Executing both JavaScript Promise .then() and .catch concurrently

Answer №1

Commitments

Your script

In addition

Understanding ajax success parameters

Similar questions

Is there a method to obtain the image path in a similar manner to item.src?

Any idea how to dynamically insert rows and columns into a table or div element?

I require assistance in configuring the timing for an animation using Jquery

Integrate these scripts for seamless functionality: JavaScript/AJAX and PHP

What is the method for incorporating choices into a schema field in Mongoose?

Apollo GraphQL has initiated the detection of a new subscription

Explore all potentialities within an array of objects by examining and contrasting their key values

What is the process for incorporating the !important declaration into a CSS-in-JS (JSS) class attribute?

Removing double double quotes for Javascript

Unable to set cookies properly

Utilize Angular to inject an input from a component directly into the header of my application

Whenever I navigate to a new page in my NEXTJS project, it loads an excessive number of modules

I am encountering the error 'user.matchPassword is not a function' while making a call to my API using bcryptjs in my Node.js and Express application. Can someone help me understand why

The message from Vee-validate indicates that the validator 'required_if' does not exist within the system

Issue with disabled button in Angular 2 when using Chrome's autocomplete feature

Updates to class variable values in jQuery are failing to take effect

Exploring the wonders of Node.js, Redis, and Express.js while navigating through the enchanting world of Asynchronous

placeholder for dropdown selection in Vue.js version 2.0.0

Type of Angular Service Issue: string or null

Utilize a variable within an HTML attribute