我的通话async / await返回Promise { <pending> }在我的行动中

Question

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

Answer 1

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