递归地进行多个AJAX调用是一个坏主意

Question

I already gone through this question. Are recursive AJAX calls a bad idea? Here answer provided by Justin Niessner is good (by using promises) But my problem is little bit different. I want to call 10 ajax calls recursively. Like when first ajax call completed , I render that data(provided by ajax call) in my view and at the same time I will call second ajax call.So my code sample will look like this:

(function() {
    var downloadAsync = function(url, callback) {
        var httpRequest;
        if (window.XMLHttpRequest) {
            httpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === 4 && httpRequest.status === 200) {
                callback(httpRequest.responseText);
            }
        }
        httpRequest.open("GET", url, true);
        httpRequest.send();
    }

    function renderData(data) {
        //data render logic          
    }
    downloadAsync("mathmatics.json", function(response) {
        renderData(response);
        downloadAsync("science.json", function(response) {
            renderData(response)
            downloadAsync("english.json", function(response) {
                renderData(response);
                ....................................
            });
        });
    });

})();

I want to render each data as soon as possible. So in success of every ajax call I am rendering that data. Here are my problems :

Is there is any better of doing this ? can I use promises in this case ? ( rendering data is necessary as soon as possible ). If yes than how and if no than what is the best way of doing this kind of calls.

1. Note : rendering data on ajax success is my priority.
2. Edit - Browser support -latest chrome,firefox and IE-11.
3. Edit - according to comments improvement :

 var array = ["mathematics.json", "science.json", "english.json"]; for (var i = 0; i < array.length; i++) { downloadAsync(array[i], renderData); } function renderData(data) { console.log(data); } 

Answer 1

Nested Ajax calls work. There are some drawbacks though:

• If you're doing real error handling, it can get quite messy with multiple nested ajax calls and you often end up repeating error handling at every level of the nesting.
• In some people's opinion, deep nesting can lead to less readable code than other techniques
• If any code in the nesting can throw exceptions, you need a lot of exception handlers to properly catch all the exceptions and it's difficult to propagate the errors cleanly - because these are async callbacks, you can't just catch the exceptions in one place.

See Edits at End of Answer Now that the Intent of the Question has been Clarified

As for other ways to do this, there are some advantages to using promises. Since none of your calls depends upon the previous set of calls and you just want to insert the results in proper order, you can significantly speed up your end-to-end time by sending all the ajax requests at once and then just serialize the results back in order. That can be done with manual coding or it can be done fairly easily with promises.

You don't say what promise library you plan to use (there are several), but here's one done using Bluebird (though the code would be similar or identical with other libraries):

(function() {
    // downloadAsync now returns a promise rather than uses a callback
    function downloadAsync(url) {
        return new Promise(function(resolve, reject) {
            var httpRequest = new XMLHttpRequest();
            httpRequest.onreadystatechange = function() {
                if (httpRequest.readyState === 4) {
                    if (httpRequest.status === 200) {
                        resolve(httpRequest.responseText);
                    } else {
                        reject(httpRequest.status);
                    }
                }
            }
            httpRequest.open("GET", url, true);
            httpRequest.send();
        }
    }

    function renderData(data) {
        //data render logic          
    }
    var items = ["mathmatics.json", "science.json", "english.json"];
    var promises = items.map(function(path) {
        return downloadAsync(path);
    });

    // Promise.all collects all the promise results and 
    // calls .then only when all the promises have completed
    Promise.all(promises).then(function(data) {
        data.forEach(renderData)
    }).catch(function(e) {
        // handle errors here
    });

})();

This has the performance advantage of it requests all the data at once, but then processes the results in the original request order. This shortens the end-to-end time compared to serializing like you had with request-response-request-response-request-response. This starts with request-request-request and Promise.all does the work for us to put the results into the right order for us to process them in the order that we requested them.

---

If you want to display any column as soon as possible, you don't even have to wait for all to complete and the second part of the code can be this:

// note we are passing an index here so you know which column it is in case that isn't
// already specified in the data
function renderData(index, data) {
    //data render logic          
}

// are you sure you want a leading / on only one of these three?
var items = ["mathmatics.json", "science.json", "english.json"];
items.forEach(function(value, index) {
    downloadAsync(value).then(function(data) {
        renderData(index, data);
    });
});

Promises aren't benefiting you as much here as you could code a similar structure with your callback mechanism.

---

Without promises, you could just use your original downloadAsync() function and do this:

downloadAsync("mathmatics.json", renderData);
downloadAsync("science.json", renderData);
downloadAsync("english.json", renderData);

This will launch all three in parallel and render each one immediately as the data arrives.

---

Or, if you had more than three and you put the filenames in an array of any length and you can do this:

["mathmatics.json", "science.json", "english.json"].forEach(function(item) {
   downloadAsync(item, renderData);
});

Answer 2

Since you're doing new browsers - your life can be a lot simpler with promises.

You're checking for things not relevant since IE6, you can simplify your work a great deal.

Here is how:

function downloadAsync(url){
    return new Promise(function(fulfill, reject){
        var xhr = new XMLHttpRequest;
        xhr.open("GET", url);
        xhr.onload = function(){ resolve(xhr.responseText); });
        xhr.onerror = reject;
        xhr.send();
    });
}

No need for the checks for XMLHttpRequest, no needs for the status checks, a simple onload - note we've also added an onerror so we don't silence errors.

Now, let's download all three at once:

// your pages
var pages = ["mathmatics.json", "science.json", "english.json"]
// your downloads and renders 
var promises = pages.map(downloadAsync).
                    /*map(JSON.parse).*/
                     map(renderData);
Promise.all(promises).then(function(){
    // code here runs when it's all done.
});