I have an API that return my expected results in a react project.
I wrote this function to call API and get the results:
async function getUsers() {
const token = store.getState().token;
const data = { token };
await MyApi.getUsers(data)
.then((result) => {
console.log(result);
return result;
})
.catch((error) => {
console.log(error);
return null;
});
}
const userList = getUsers();
When I console.log the result
in the then
section of the function, it printed the expected list of users (that is a json array).
But when I console.log the userList
it is a promise
like bellow image:
that means the returned value of getUsers
function is a Promise
.
1- How can I get the results from this promise?
2- why the PromiseResult
is undefined
while the result
in then
section is a json array?
** these codes are not in the react component
the expected result
is:
[
{
id: 1,
name: "user1",
role: "student"
},
{
id: 2,
name: "user2",
role: "student"
},
{
id: 3,
name: "user3",
role: "student"
},
]
and I want to use userList
array to create user card
:
<div>
{userList ? (
userList.map((user) =>
{
<Card>
<h1> user.name </h1>
</Card>
}
):
(<h1>user list is empty </h1>)
}
Why do you get Promise {pending} ?
The promise will always log pending as long as its results are not resolved yet.
Thus, You must call .then() in order to capture the results.
If the function in the .then() handler returns a value, then the Promise resolves with that value to the "userList", however in your case .then() returns another promise, thus the next .then() handler will always contain the value you wish to get.
another option is just to add await getUsers()
Issue
getUsers
is anasync
function, so it implicitly returns aPromise
but you don’t return any resolved value, it simply awaits theMyApi.getUsers
promise to resolve and returns nothing, i.e. a void return, or undefined.In other words, it looks something like the following, logically:
Solution
Return the
MyApi.getUsers
promise.Now in your react code you will likely have some
useEffect
hook calling this function to set some loaded state.Or
Here is a code snippet it might help you understand it better
and I think reading this link will help you understand async await deeply
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await