Reputation: 805
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>)
}
Upvotes: 5
Views: 17395
Reputation: 203587
why the PromiseResult is undefined while the result in then section is a json array?
getUsers
is an async
function, so it implicitly returns a Promise
but you don't return any resolved value, it simply awaits the MyApi.getUsers
promise to resolve and returns nothing, i.e. a void return, or undefined.
In other words, it looks something like the following, logically:
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;
});
return undefined;
}
Return the MyApi.getUsers
promise.
async function getUsers() {
const token = store.getState().token;
const data = { token };
return MyApi.getUsers(data)
.then((result) => {
console.log(result);
return result;
})
.catch((error) => {
console.log(error);
return null;
});
}
Now in your react code you will likely have some useEffect
hook calling this function to set some loaded state.
const [userList, setUserList] = useState([]);
useEffect(() => {
getusers()
.then(userList => setUserList(userList))
.catch(error => {
// handle any error state, rejected promises, etc..
});
}, []);
Or
const [userList, setUserList] = useState([]);
useEffect(() => {
const loadUserList = async () => {
try {
const userList = await getusers();
setUserList(userList)
} catch(error) {
// handle any error state, rejected promises, etc..
}
};
loadUserList();
}, []);
Upvotes: 6
Reputation: 377
Here is a code snippet it might help you understand it better
//Api response simulation
function fetchUsers()
{
return Promise.resolve({'name' :'tom'});
}
//async will always return promise
async function getUsers() {
const response = await fetchUsers();
return response;
}
getUsers().then((users) => console.log(users)
// here you can fill the usersList
);
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
Upvotes: 1
Reputation: 260
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.
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();
console.log(userList ); // Promise <pending>
userList.then((result)=> {
console.log(result) // "Some desired value"
})
another option is just to add await getUsers()
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 =await getUsers();
console.log(userList ); // "Some desired value"
Upvotes: 1