我的调用 async/await 在我的操作中返回一个 Promise {<pending>}

IT技术 javascript reactjs redux async-await axios
2021-05-02 03:44:07

嗨,我对 api 调用很陌生,我开始使用 axios 来获得一副简单的卡片!我正在尝试做一个简单的 axios 调用,当我控制台记录我的资源时,它给了我我需要的东西。但是当我返回它时,它给了我 Promise { < pending > } 。从我所看到的,这是因为它是一个异步Promise,并且Promise正在得到解决,但是因为它是异步的,它会在返回实际数据之前移动到下一行代码?如果我错了,请纠正我!一些澄清会很棒。提前致谢!

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

我在 redux 中的操作

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

然后在我的减速器中,我的 action.payload 返回 Promise { <pending> }

1个回答

从评论更新

我相信您只需要将导出函数更改为异步并等待 getData:

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