Replacing multiple dependant nested async calls in Javascript (ECMA 6)

Question

I am initializing my JS application by calling a number of methods asynchronously loading ressources, each of them depending of the previous ones. My intuitive solution is to nest the calls in callback functions (cba, cbb, cbc, cbd), beeing called from the inner of LoadA, LoadB, LoadC, LoadD respectively after these (LoadA, LoadB, LoadC, LoadD) were successfully completed:

app.LoadA( function cba() {
        app.LoadB( function cbb() {
            ....        
            app.LoadC( function cbc() {
            ...           
                app.LoadD( function cbd() {
                    ...
                } );
            } );
        } );
    } );

LoadA( cb )
{
    let url = '.........'; // just an url
    let req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.responseType = 'arraybuffer';

    let lh = this;

    req.onload = function ol(event)         
    {
        let arrayBuffer = req.response; 
        let loadedObject = Convert( arrayBuffer, ......... );
        cb( loadedObject ); // call, if successed!
    }
    req.send(null);
}
....

LoadA returns without loading the object, so LoadB has to wait until LoadA's embedded onload function calls the callback cb and so on.

I don't like this nesting solution, as it is hard to overview and to maintain.

My question is: is there an other (focused on the "happy path", nicer, shorter, less confusing, easier to understand and maintain) possibility to achieve the same result?

Answer 1

Here is a comparison of "callback hell" and the nicer code you can achieve with async/await:

// dummy implementations: 
//  these functions call cb with value 1 to 4, after 100ms
const loadA = (cb) => setTimeout(_ => cb(1), 100);
const loadB = (cb) => setTimeout(_ => cb(2), 100);
const loadC = (cb) => setTimeout(_ => cb(3), 100);
const loadD = (cb) => setTimeout(_ => cb(4), 100);

function callbackHell() {
    loadA( function cba(a) {
        loadB( function cbb(b) {
            loadC( function cbc(c) {
                loadD( function cbd(d) {
                    console.log([a, b, c, d]);
                });
            });
        });
    });
}

async function nicerCode() {
    const res = [
        await new Promise(loadA),
        await new Promise(loadB),
        await new Promise(loadC),
        await new Promise(loadD)
    ];
    console.log(res);
}

callbackHell();
nicerCode();

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

To avoid callback hell, you'll need to use Promises.

If the loadA, ..., loadN functions return promises then you just call .then() after each one in order.

loadA().then(function() {
  loadB().then(function() {
    loadC().then(...
  });
});

What's now important is to remember that .then() return a Promise that resolves with the value of it's argument.

So if both loadA and loadB return Promises, you can just chain them like so:

loadA().then(function() {
  return loadB();
).then(...)

which is equivalent to this:

loadA().then(loadB).then(loadC).then(...)

Much simpler!

If your function doesn't return a Promise, then you need to wrap them inside one with a helper function.

function wrapInsidePromise(f) {
  return new Promise(function(resolve, reject) {
    f(function() {
      resolve();
    });
  });
}

var pLoadA = wrapInsidePromise(app.loadA);
var pLoadB = wrapInsidePromise(app.loadB);
...

pLoadA().then(pLoadB).then(...);

What's more, in ES6 you can use async/await which let's you use Promises in an asynchronous way.

async function() {
  await loadA();
  await loadB();
  ...
  let finalResult = await loadN();
  ...
}

Answer 3

I would break this up using a "Promise" for each async call.

MDN have a great explanation of how to use them here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

Your app code could end up looking something like this...

app = {

    loadA: function() {
        return new Promise((resolve) => {
            console.log('Loading A');
            resolve();
        });
    },

    loadB: function () {
        return new Promise((resolve) => {
            console.log('Loading B');
            resolve();
        });
    },

    // For demonstration, I have coded loadC with a rejection if it fails
    // (Success is based on a random boolean) 
    loadC: function () {
        return new Promise((resolve, reject) => {
            console.log('Loading C');
            var success = Math.random() >= 0.5;
            if( success ){
                resolve();
            } else {
                reject('C did not load');
            }

        });
    },

    loadD: function () {
        return new Promise((resolve) => {
            console.log('Loading D');
            resolve();
        });
    }

};

// A global function for reporting errors
function logError(error) {
    // Record the error somehow
    console.log(error);
}

Now call them in a promise chain

app.loadA().then(app.loadB).then(app.loadC, logError).then(app.loadD);

Now, if in the future you decide to change the order you want your functions called, you don't need to touch the code in the functions at all because you used promises. You can just change the line containing the promise chain:

app.loadA().then(app.loadD).then(app.loadB).then(app.loadC, logError);

(The above example assumes you can change the methods on app to work as promises. If app is a 3rd party thing that you cannot edit the solution would be different)