Recursively call api (axios / javascript)

Question

I'm trying to fill an array with the result of multiple API calls using recursion. I'm pretty over my head here with ES6 and the recursion stuff and could need some help.

Here is my current code, which only returns "promise" :

getAllEmployees: function() {
    let allEmployees = []; // this array will contain all employees
    let pageNumber = 1; // start with page 1
    const getThoseEmployees = function(pageNumber) {
        return axios.get(rest_url + 'users/?per_page=50&page=' + pageNumber, {
            headers: {
                'X-WP-Nonce': WPsettings.nonce
            },
        }).then(response => {
            // add the employees of this response to the array
            allEmployees = allEmployees.concat(response.data);
            pageNumber++;
            if (response.headers['x-wp-total'] > allEmployees.length) {
                // do me again...
                return getThoseEmployees(pageNumber);
            } else {
                // this was the last page, return the collected contacts
                return allEmployees;
            }
        });
    }
    return getThoseEmployees();
},


// after "created" in vue
this.allEmployees = this.getAllEmployees(); // returns "promise"

Possible duplicate of [How to return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — evolutionxbox, Nov 03 '17 at 15:15

Dominic Serrano · Accepted Answer · 2017-11-03T15:40:19.467

To access value resolved from a promise you must use the Promise's .then method. So instead of this assignment, this.allEmployees = this.getAllEmployees(); access the resolved value from getAllEmployees like so:

this.getAllEmployees()
.then(employees => {
    console.log(employees); // make sure this is what you need
    this.allEmployees = employees;
});

EDIT: Reply to comment.

Your function getAllEmployees returns the value of getThoseEmployees, which is a promise. Because allEmployees, when eventually returned, is inside of the anonymous function of the .then, that value will always be internal to the promise returned by getThoseEmployees.

// This functions return value is a promise
const getData = () => {
    return axios.get('some-url')
    .then(data => {
        // Anything returned inside of a .then will be 
        // resolved and can only be accessed with another .then.
        // Using .then itself will return another promise object, 
        // which is why promises can be chained.
        return formatThisData(data);
    });
};

In order to access the formatted data I want from getData, I have to access the resolved data from the promise.

getData()
.then(formattedData => {
    // formattedData is what was returned from inside the .then above
});

But will not the function eventually return the value of allEmployees? The way I thought about it, getThoseEmployees() would call itself until the else statement where it would instead return the allEmployees-array. — Johan Dahl, Nov 03 '17 at 15:23
I marked Dominics answer as the correct, since it did answer my question and made me understand. However, I'm reading the suggested duplicate (long thread) and I'm sure it will clarify it further. Not sure If I should check the "this solved my problem" button or not? — Johan Dahl, Nov 03 '17 at 15:47

Recursively call api (axios / javascript)

1 Answers1