如何在反应中从已完成的 promise 中获取价值

Question

我有一个 API 在反应项目中返回我的预期结果。

我写了这个 function 来调用 API 并得到结果：

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 在 function 的then部分中记录result时，它打印了预期的用户列表（即 json 数组）。 但是当我 console.log 用户promise userList如下图所示：

这意味着getUsers function 的返回值是Promise 。

1- 我怎样才能得到这个 promise 的结果？

2-为什么PromiseResult undefined ，而then部分中的result是 json 数组？

** 这些代码不在反应组件中

预期result是：

[
 {
  id: 1,
  name: "user1",
  role: "student"
 },
{
  id: 2,
  name: "user2",
  role: "student"
 },
{
  id: 3,
  name: "user3",
  role: "student"
 },
]

我想使用userList数组来创建user card ：

<div>
{userList ? (
 userList.map((user) =>
 {
  <Card>
    <h1> user.name </h1>
  </Card>
 }
):
(<h1>user list is empty </h1>)
}

Answer 1

问题

为什么 PromiseResult 未定义，而 then 部分中的结果是 json 数组？

getUsers是一个async function，因此它隐式返回Promise但您不返回任何已解析的值，它只是等待MyApi.getUsers ZB321DE3BDC299EC807E9F795D7D9DEEB 以返回未定义的任何内容。

换句话说，从逻辑上讲，它看起来像下面这样：

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

解决方案

返回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;
    });
}

现在，在您的反应代码中，您可能会有一些useEffect钩子调用此 function 来设置一些加载的 state。

const [userList, setUserList] = useState([]);

useEffect(() => {
  getusers()
    .then(userList => setUserList(userList))
    .catch(error => {
      // handle any error state, rejected promises, etc..
    });
}, []);

或者

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

Answer 2

为什么你会得到 Promise {pending}？ 只要其结果尚未解决，promise 将始终记录挂起。 因此，您必须调用.then() 才能捕获结果。 如果 .then() 处理程序中的 function 返回一个值，则 Promise 将该值解析为“userList”，但是在您的情况下。then() 返回另一个 ZB321DE3BDC299EC807E9F795D7D9 处理程序将始终包含。您希望获得的价值。

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

另一种选择只是添加 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"

Answer 3

这是一个代码片段，它可能会帮助您更好地理解它

//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 
 );

我认为阅读此链接将帮助您深入了解异步等待https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await