在jQuery / JavaScript中使用循环和承诺在另一个函数之后运行一个函数

Question

I'm working on a college/personal project which takes RSS urls and sends them through a series of APIs. Code follows:

var tempStory = [];
function getFeed () {
        $.getJSON('spoonfed/app/scripts/categories.json', function(categories){
            for (var category in categories){
                if (categories[category][2] === true){
                    getFeedURLs(categories[category][0]).then(function(rssData) {
                        for (var item in rssData){
                            tempStory.push(rssData[item]);
                        }
                    });
                }
            }
    });
}

There are an unknown number of categories I need to iterate over in addition to 10 news stories in each category, which are then pushed to the array tempStory. I need to run another function on this array of data. I think promises are the key here but I can't get my head around how I'd use them in this case.

Any help would be really appreciated and I'm happy to provide more of the code if needed, including the structure of the categories.json file and the getFeedURLs function.

Answer 1

If the issue is that you're just trying to figure out how to get all the data out, then you can do this:

function getFeed() {
    return $.getJSON('spoonfed/app/scripts/categories.json').then(function (categories) {
        var tempStory = [], promises = [];
        for (var category in categories) {
            if (categories[category][2] === true) {
                promises.push(getFeedURLs(categories[category][0]).then(function (rssData) {
                    for (var item in rssData) {
                        tempStory.push(rssData[item]);
                    }
                }));
            }
        }
        return $.when.apply($, promises).then(function() {
            // return results array as the fulfilled value of the promise
            return tempStory;
        });
    });
}

getFeed().then(function(data) {
    // all the data available here
}, function(err) {
    // error here
});

The key aspects of this are:

1. Return the original ajax promise from getFeed() .
2. When iterating the categories, push all those promises into an array to collect them all
3. Use $.when() with your array of promises to know when all of those are done
4. From within the $.getJSON.then() handler, return the $.when() promise which will chain to the $.getJSON() promise and let you return an array of results.
5. From within the $.when().then() handler, return our results so that becomes the fulfilled value of the final promise

Note: because of the way you chose to accumulate the tempStory array, it's results are not in a guaranteed order. Additional code could be written to maintain the order.