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

【问题标题】：My call async/await returns a Promise {<pending>} in my actions我的调用 async/await 在我的操作中返回一个 Promise {<pending>}
【发布时间】：2019-01-06 05:02:38
【问题描述】：

嗨，我对 api 调用非常陌生，我开始使用 axios 来获得一副简单的卡片！我正在尝试做一个简单的 axios 调用，当我控制台记录我的 res 时，它给了我我需要的东西。但是当我退回它时，它给了我 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
            })
    }
}

然后在我的 reducer 中，我的 action.payload 返回 Promise { }

【问题讨论】：

查看一下你如何处理异步操作github.com/reduxjs/redux-thunk
所有标记为async 的函数总是返回一个Promise，这就是async 所做的。您需要await getData() 或getData.then(...)。此外，您不需要return await result.data; 中的await。 result.data 不是异步调用，因此无需等待
我有 Thunk 作为我的中间件。
@MatthewHerbst 哦，好吧，这更有意义！我更新了我的示例以使有效负载返回一个 .then 因为如果我在它前面放一个等待它说等待是一个保留字？但我仍然得到解决的承诺..

标签： javascript reactjs redux async-await axios

【解决方案1】：

从 cmets 更新

我相信您只需要将导出功能更改为异步并等待 getData：

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

【讨论】：

(await getData()).data 可能与 OPs 代码匹配，但实际上 getData 方法应该已经返回数据而不是具有数据属性的东西。
是的。谢谢！