.then chaining doesn't work. Why?

Question

I would like to load data with AJAX from the Backend. There are 4 AJAX Requests (I don't want to use jQuery). If all Requests are done, I will work with the received/loaded data.

Asynchronus Pseudo Code:

1. Load customerTable
2. Load projectTable
3. Load offerTable
4. Load phaseTable
5. Now do some stuff with the data...

I'm learning and trying promises with .then() chaining.

The function getMySqlTable() return a promise if an AJAX call is done:

    function getMySqlTable(theCase){
    return new Promise(function (resolve,reject){
        let data = {header:{case:theCase}};

        //AJAX request
        let ajGetProjectsAsOptions = new AjaxJsonRequest('php/ajax/customerDesk.php',data,function(xmlhttp){
            let response = JSON.parse(xmlhttp.responseText);
            if(response.status){
                switch(theCase){
                    case 'getCustomerTable':
                        customerTable = response.data.customers;
                        resolve(true);
                        break;
                    case 'getProjectTable':
                        projectTable = response.data.projects;
                        resolve(true);
                        break;
                    case 'getOfferTable':
                        offerTable = response.data.offers;
                        resolve(true);
                        break;
                    case 'getPhaseTable':
                        phaseTable = response.data.phases;
                        resolve(true);
                        break;
                }
            }else{
                printMessages(response.message);
                reject(false);
            }
        });
        ajGetProjectsAsOptions.doRequest();
    });
}

The following code works and does what I want:

    getMySqlTable('getCustomerTable')
    .then(()=>getMySqlTable('getProjectTable'))
    .then(()=>getMySqlTable('getOfferTable'))
    .then(()=>getMySqlTable('getPhaseTable'))
    .then(
        function(){
                console.log(customerTable);
                console.log(projectTable);
                console.log(offerTable);
                console.log(phaseTable);
            }
        )

But if I want to do more stuff by adding brackets, it doesn't work. All .then will be executed immediately, if I add some brackets. Why?

  getMySqlTable('getCustomerTable')
    .then(()=>{
            getMySqlTable('getProjectTable')
    })
    .then(()=>{
            getMySqlTable('getOfferTable')
    })
    .then(()=>{
            getMySqlTable('getPhaseTable')
    })
    .then(()=>{
            console.log(customerTable);
            console.log(projectTable);
            console.log(offerTable);
            console.log(phaseTable)
    })

Could someone help me?

Answer 1

If you use curly brackets inside a callback, it requires you to return a value. Do "return getMySqlTable(...)" in every then call.