如何使递归函数正确地工作与承诺

Question

I have a recursive function that returns a promise, which I then do something based on the outcome of that promise. The problem is that it is only returning one iteration of the recursive function, which is not making sense to me.

I have tried to get this to work by using a setTimeout call, which works but is not good practice. I have also tried desperately putting in another then after the promise to see if that would help.

The variable I am trying to get the correct value for is "SurveyArray". The "Survey" variable gives the correct results of three arrays. SurveyArray should be a consolidation of those arrays into one array of 245 elements, but it is coming up with 100 elements, which is just one array worth of elements. In my code I have logged both "Survey" and "SurveyArray" to the console. You can see this in action in this codepen: https://codepen.io/anon/pen/JVxmKP

var apiToken = "h69TKYgxu46SMEXzcKkeRUXovq2jALTpHDhPUGLq"
var dataCenter = "co1"

var baseUrl = "https://cors-anywhere.herokuapp.com/https://" + 
dataCenter + ".qualtrics.com/API/v3/surveys"


function getSurveys(url) {
// Default options are marked with *
    return fetch(url, {
        method: "GET", // *GET, POST, PUT, DELETE, etc.
        mode: "cors",
        // include, *same-origin, omit
        headers: {
            "Content-Type": "application/json",
            "x-api-token": apiToken,
            "accept": "application/json"
        }
    })
    .then(response => response.json()); // parses response to JSON
}

var Surveys = []
var offset = 0;
var page = 0
var SurveyArray = []

GroupSurveys(baseUrl).then(function(){

    console.log(Surveys)
    Object.keys(Surveys).forEach(function(surveys) {

Object.keys(Surveys[surveys]. 
result.elements).forEach(function(survey) {


SurveyArray.push(Surveys[surveys].result.elements[survey].name)
    })

     console.log(SurveyArray)

})





})

function GroupSurveys(url) {
    return getSurveys(url)
        .then(data => Surveys.push(data))
        .then(function() {
            if (Surveys[page].result.nextPage) {
                offset += 100
                page += 1
                GroupSurveys(baseUrl + "?offset=" + offset)
            }

    })
    .catch(error => console.error(error)); // JSON-string from 
`response.json()` call
}

I expect the SurveyArray to have 245 elements, 100 from the first array, 100 from the second array, and 45 from the last array. It is only coming up with 100 elements, which is just one array worth of data.

Answer 1

You need wrap GroupSurveys by Promise that tracks all request done:

function GroupSurveys(url) {
    return new Promise(res => {
        function GroupSurveysRecursive(url) {
            getSurveys(url)
                .then(data => Surveys.push(data))
                .then(function () {
                    if (Surveys[page].result.nextPage) {
                        offset += 100;
                        page += 1;
                        GroupSurveysRecursive(baseUrl + '?offset=' + offset)
                    } else {
                        res();
                    }
                })
                .catch(error => console.error(error)); // JSON-string from `response.json()` call
        };
        GroupSurveysRecursive(url);
    })
}