使用 fetch 方法做出反应和承诺问题

Question

我是 react 新手，我遇到了一些异步获取数据的问题：

我想获取 github 用户

function fetchUser(username) {
  return fetch(`https://api.github.com/users/${username}`)
    .then(response => response.json())
    .then(data => data)
}

export function getUserData(username) {
  const object =  {
    profile: fetchUser(username),
  }
  console.log(object)
  return object
}

这是我在组件中的方法

componentDidMount() {
  getUserData(this.props.playerOne)
}

但这是我在控制台中得到的

{个人资料：承诺}

我确定我不太了解这个承诺，所以你能帮助我在我的对象中没有 Promise 而是我正在获取的数据吗？ （如果我在我的 fetch 中记录数据，我得到了我想要的）

Answer 1

您可以使此函数异步并等待承诺解决。

export async function getUserData(username) {
  const object =  {
    profile: await fetchUser(username),
  }
  console.log(object)
  return object
}

然后在你的componentDidMount

componentDidMount() {
  getUserData(this.props.playerOne)
    .then((profile) => { this.setState({ profile }) })
}