JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/q.js/1.0.0/q.min.js"></script>
<button onclick="edit()">Read test.txt</button>

JavaScript

//Global variable for test.txt
var test;

function edit()
{
    /*
    var deferred = Q.defer();
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", "test.txt", true);
    rawFile.responseType = "text";
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                //resolve promise with responseText;
                deferred.resolve(rawFile.responseText);
            }
        }
    };
    deferred.promise
        .then(processStep1)
        .then(processStep2)
        .then(processStep3);
    */
    
    //Imitating async call that will finish after 2 seconds
    var deferred;
    var promise;
    //if we haven't read the file yet, then make async call
    if (test === undefined) {
        deferred = Q.defer();
        
        setTimeout(function () {
            test = "This is the content of the text file."
            deferred.resolve(test);
        }, 2000);
        
        promise = deferred.promise;
    }
    //Else we've already read the file. 
    else {
        promise = Q(test);
    }
    
    //Start adding your functions to process text here:
    promise.then(processStep1)
        .then(processStep2)
        .then(processStep3);
}

function processStep1(data) {
    alert("Step 1: " + data);
    //adding some stuff onto data for example
    data = data + "... And more data.";
    return data;
}

function processStep2(data) {
    alert("Step 2: " + data);
    data = "Adding data to front. " + data;
    return data;
}

function processStep3(data) {
    alert("Step 3: " + data);
    return data;
}