Promise .then() Not Waiting For Resolve() Of the Previous Promise In A Promise Chain

Question

I am very new to the concept of Promises but I read that this is an efficient way of making functions execute one after another by doing something called Promise chaining.

The //RUN ON CLCK: CREATE TABLES code below basically makes two AJAX calls, "Create Database Tables" and "Check Database Tables", so that when I press a button on the webpage, Database Tables will be created on the backend, and then their existence will be checked.

But it doesn't run as intended. In many cases, as obseved from the console log, the second function runs (or) finishes first. In any case, that shouldn't happen in a chain.

It looks like the 2nd function is not waiting for a resolve from the 1st function.

Please note that my functions have arguments so I can't avoid calling them without parentheses inside the then() as some other articles recommend.

 $(document).ready(function() { /*PAGE VARS*/ var mainAdmStgChkTblSrvltMsg_elm = document.getElementById('mainAdmStgChkTblSrvltMsg'); var mainAdmStgCrDelTblSrvltMsg_elm = document.getElementById('mainAdmStgCrDelTblSrvltMsg'); var mainAdmStgCrTblBtn_elm = document.getElementById('mainAdmStgCrTblBtn'); /*FN DEF: CHECK TABLES*/ var chkTbl = function(tblNm) { return new Promise(function(resolve, reject) { $.ajax({ type: 'GET', url: '../../../../../../app/TblSrvlt', data: { getType: 'chkTbl', tblNm: tblNm }, success: function(data) { var srvltMsg = data.srvltMsg; var srvltSuccess = data.srvltSuccess; mainAdmStgChkTblSrvltMsg_elm.textContent = srvltMsg; if (srvltSuccess === true) { mainAdmStgChkTblSrvltMsg_elm.setAttribute('class', 'text-success'); } else { mainAdmStgChkTblSrvltMsg_elm.setAttribute('class', 'text-danger'); } /*RETURN RESOLVE FOR PROMISE CHAIN*/ console.log("chkTbl"); resolve(); } }); }); }; /*FN DEF: CREATE TABLES*/ var crTbl = function(tblNm) { return new Promise(function(resolve, reject) { $.ajax({ type: 'POST', url: '../../../../../../app/TblSrvlt', data: { postType: 'crTbl', tblNm: tblNm }, success: function(data) { var srvltMsg = data.srvltMsg; var srvltSuccess = data.srvltSuccess; mainAdmStgCrDelTblSrvltMsg_elm.textContent = srvltMsg; if (srvltSuccess === true) { mainAdmStgCrDelTblSrvltMsg_elm.setAttribute('class', 'text-success'); } else { mainAdmStgCrDelTblSrvltMsg_elm.setAttribute('class', 'text-danger'); } /*RETURN RESOLVE FOR PROMISE CHAIN*/ console.log("crTbl"); resolve(); } }); }); }; /*RUN ON CLCK: CREATE TABLES*/ $(document).on('click', '#' + mainAdmStgCrTblBtn_elm.id, function() { Promise.resolve().then(crTbl("chairs")).then(chkTbl("chairs")).catch(); }); });

Answer 1

You have to pass a function reference to .then() so it can call your function LATER. Instead, you are calling the functions immediately and passing their return value to .then() which is why they are getting called immediately and not waiting for the prior promise to resolve.

Change this:

/*RUN ON CLCK: CREATE TABLES*/
$(document).on('click', '#' + mainAdmStgCrTblBtn_elm.id, function() {
    Promise.resolve()
        .then(crTbl("chairs"))
        .then(chkTbl("chairs"))
        .catch();
});

to this:

/*RUN ON CLCK: CREATE TABLES*/
$(document).on('click', '#' + mainAdmStgCrTblBtn_elm.id, function() {
    Promise.resolve()
        .then(function() {return crTbl("chairs")})
        .then(function() {return chkTbl("chairs")})
        .catch(function(err) { console.log(err)});
});

And, you don't actually need the Promise.resolve() at the start of the chain:

/*RUN ON CLCK: CREATE TABLES*/
$(document).on('click', '#' + mainAdmStgCrTblBtn_elm.id, function() {
     crTbl("chairs")
        .then(function() {return chkTbl("chairs")})
        .catch(function(err) { console.log(err)});
});