how to get value from a fulfilled promise in react

by

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:

enter image description here

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

3 thoughts on “how to get value from a fulfilled promise in react”

  1. 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"
    Reply

  2. Issue

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

    Solution

    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();
}, []);
    Reply

  3. 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

    Reply

Leave a Comment