JSFiddle - React, Tailwind, and code Playground

HTML

<h1>My results</h1>
<div id="result"></div>

JavaScript

// setup data

var data = { id : [] };

for(var i = 0; i < 10; i++) {
    data.id.push(i);
}

// DAO definition
var DAO = {
    getUserById : function(id) {
        var deferred = $.Deferred();
        
        setTimeout(function() { 
            var isError = Math.floor(Math.random()*11) > 5;
            
            if(isError) {
                deferred.reject("WOW - Much Handler - So error");
            } else {
                deferred.resolve({
                    username :  'Max',
                    userId : id
                }); 
            }
        }, 50);
        
        return deferred.promise();
    },
    
    getOtherData : function(username, userId) {
        var deferred = $.Deferred();
        
        setTimeout(function() {
            deferred.resolve((username + ' id: ' + userId));
        }, 20);
        
        return deferred.promise();
    }
};



function printResult(res) {
    $('#result').html($('#result').html() + '<br />' + res);
};

// DAO usage

for(var i=0;i<data.id.length;i++)
{
    DAO.getUserById(data.id[i])
    .done(function(res) {
        DAO.getOtherData(res.username, res.userId).done(function(result) {
            printResult(result);
        });
    })
    .fail(function(res) {
        printResult(res);
    });
}