Promise {<pending>} being returned and await key word not working [duplicate]

Question

When running the below code and dumping out the results variable it returns Promise {<pending>}, I have added the await key word to the being of the function call so const results = await getAllResults() however this returns the error of Unexpected reserved word 'await'.

Anyone have any ideas?

useEffect(() => {

    async function getPageOfResults(page) {
        const response = await axios.get('https://swapi.dev/api/starships/?page=' + page);
        return response.data.results; 
    }

    async function getAllResults() {
        let starships = [];
        let lastResultsLength = 10;
        let page = 1;
        while (lastResultsLength === 10) {
            const newResults = await getPageOfResults(page);
            page++;
            lastResultsLength = newResults.length;
            starships = starships.concat(newResults);
        }

        return starships;
    }

    const results = getAllResults();

}, []);

Answer 1

You need to add async in the useEffect like so:

useEffect(async () => {

    async function getPageOfResults(page) {
        const response = await axios.get('https://swapi.dev/api/starships/?page=' + page);
        return response.data.results; 
    }

    async function getAllResults() {
        let starships = [];
        let lastResultsLength = 10;
        let page = 1;
        while (lastResultsLength === 10) {
            const newResults = await getPageOfResults(page);
            page++;
            lastResultsLength = newResults.length;
            starships = starships.concat(newResults);
        }

        return starships;
    }

    const results = await getAllResults();

}, []);