Chaining dhx.ajax.get


#1

Is it possible to chain different ajax calls?

eg
dhx.ajax.get(‘myAPI’)
.then((data) => {
//do a bunch of code
console.log(‘1’);
}
.then(() => {
dhx.ajax.get(‘mySecondAPI’)
.then((data) => {
//do a bunch of code
console.log(‘2’)
})}
.then(() => {
//create dhtmlx grid
}
.then(() => {
console.log(“end”)
})

When I execute this code, it happens more than once i see a console log of 1, end and then 2.

EDIT: tried to remove this because I noticed I chained my then() wrong in my actual code.


#2

I’m going to guess it’s an issue with the Promise object expecting only one .then() statement per object, and the way you have them chained calls multiple .then() statements against the original dhx.ajax.get(), and so it’s calling all of the .then() statements for each of the .then() statements.

The difference is that you need to nest the API calls instead of chaining them.

Here’s how I nest/chain ajax get calls:

dhx.ajax.get('myAPI').then((data) => {
    //do a bunch of code
    //also do the next ajax.get call inside this code
    dhx.ajax.get('mySecondAPI').then((data2) => {
        // I use a different returned object name so I can maintain references to previous data if needed
        //do a bunch of code
        console.log('2');
        
        //create dhtmlx grid here because you want it after the second API call, I believe
    }).catch((error2) => {
        //if something goes wrong, maybe you want to notify the user here
    }).finally(() => {
        // if you still wanted to create the grid even if something went wrong,
        // you can create it here and it will happen on both success and failure of
        // the second API call
        console.log('end');
    });
    console.log('1');
}).catch((error) => {
    // alert the user if something went wrong on the first API call
}).finally(() => {
    // if you want the grid to be created even if either of the API calls fail,
    // put it here.
});