'Chain methods with AJAX calls so that they execute in sequential order

I have a React web form with complex validation that runs each time a focus() or blur() happens on each HTML form field. Each of those field events is associated with one or more JavaScript methods. Within those JavaScript methods we do AJAX calls to validate the data entered into the form field (e.g. check to see if the vendor ID is found in the ERP software, etc.).

Now that I've completed all of the field validation logic, I want to include logic on the Submit button where once more it cycles through each of the form fields and executes the relevant validation-related JavaScript methods.

The problem is, these methods need to be called in a particular order. And, in most instances, we need to wait for the AJAX calls embedded in the JavaScript method to finish before moving on to the next call.

I've looked at JavaScript Promises but is it possible to have the Promise wait for the embedded JavaScript AJAX call to complete before moving on to the next then()?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source