admin管理员组文章数量:1323335
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('/?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 > }
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./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 > }
Share Improve this question edited Jan 5, 2019 at 20:39 yabna asked Jan 5, 2019 at 20:23 yabnayabna 993 silver badges13 bronze badges 4- look up thunks it how you handle async actions github./reduxjs/redux-thunk – Joe Warner Commented Jan 5, 2019 at 20:25
-
2
All functions marked as
async
return a Promise, always, that's whatasync
does. You need toawait getData()
orgetData.then(...)
. Also, you don't need theawait
in thereturn await result.data;
.result.data
is not an async call, so there's nothing to wait for – Matthew Herbst Commented Jan 5, 2019 at 20:27 - I have Thunk as my middleware. – yabna Commented Jan 5, 2019 at 20:34
- @MatthewHerbst Oh ok that makes a lot more sense! I updated my example to have the payload returning with a .then because if I put a await in front of it it says that await is a reserved word? But I am still getting a promise resolved.. – yabna Commented Jan 5, 2019 at 20:40
1 Answer
Reset to default 6Updated from ments
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
}
}
本文标签: javascriptMy call asyncawait returns a Promise ltpendinggt in my actionsStack Overflow
版权声明:本文标题:javascript - My call asyncawait returns a Promise {<pending>} in my actions - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742136395a2422390.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论