My call async/await returns a Promise {<pending>} in my actions

user_9057507 0
Viewed 8780

Hi I am very new to api calls and I am starting to use axios to get a simple deck of cards! I am trying to do a simple axios call, and when I console log my res, it gives me what I need. But when i return it, it gives me Promise { < pending > } . From what I have seen, it is because it is a async promise, and the promise is getting resolved but because it is async, it moves on to the next line of code before returning the actual data? Please correct me if I'm wrong! Some clarification would be awesome. Thanks in advance!

async function getData() {
    const result = await axios('https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1');
    console.log(result.data);
    return await result.data;
}

my actions in redux

export function getNewDeck() {
    return {
        type: GET_NEW_DECK,
        payload: getData().then( res => {
                 return res.data
            })
    }
}

Then in my reducer, my action.payload returns the Promise { < pending > }

axios redux async-await reactjs javascript
1 Answers

Updated from comments

I believe you just need to change your export function to also be asynchronous and await on getData:

export async function getNewDeck() {
    const payload = await getData();
    return {
        type: GET_NEW_DECK,
        payload
    }
}
user_42820810
Related