javascript - 如何在反应中从履行的承诺中获得价值

Question

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

我写了这个函数来调用 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();

当我在函数result的then部分 console.log 时，它打印了预期的用户列表（即一个 json 数组）。但是当我 console.log 时，userList它promise就像下面的图像：

这意味着getUsers函数的返回值是 a Promise。

1- 我怎样才能从这个承诺中得到结果？

2-为什么in部分PromiseResult是json 数组？undefinedresultthen

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

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

标签： javascriptreactjsasynchronouspromiserest

Answer 1

问题

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

getUsers是一个async函数，因此它隐式返回 aPromise但您不返回任何已解析的值，它只是等待MyApi.getUsers解决的承诺并且不返回任何内容，即返回 void 或未定义。

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

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承诺。

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钩子调用这个函数来设置一些加载状态。

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