Как заставить рекурсивную функцию работать правильно с обещанием

Question

У меня есть рекурсивная функция, которая возвращает обещание, которое я затем делаю, основываясь на результате этого обещания. Проблема в том, что он возвращает только одну итерацию рекурсивной функции, что для меня не имеет смысла.

Я попытался заставить это работать, используя вызов setTimeout, который работает, но не является хорошей практикой. Я также отчаянно пытался вставить еще один после обещания, чтобы посмотреть, поможет ли это.

Переменная, для которой я пытаюсь получить правильное значение, это "SurveyArray". Переменная «Survey» дает правильные результаты трех массивов. SurveyArray должен быть объединением этих массивов в один массив из 245 элементов, но в нем будет 100 элементов, что составляет всего один элемент массива. В моем коде я записал оба «Survey» и «SurveyArray» на консоль. Вы можете увидеть это в действии в этом коде ручки: 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
}

Я ожидаю, что SurveyArray будет иметь 245 элементов, 100 из первого массива, 100 из второго массива и 45 из последнего массива. Это всего лишь 100 элементов, что составляет всего один массив данных.

Answer 1

Вам нужно обернуть GroupSurveys в Promise, который отслеживает все выполненные запросы:

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);
    })
}