async / await无法在ComponentDidMount中使用react.js

时间:2019-07-28 18:47:21

标签: reactjs async-await axios

我正在尝试使用axios来获取数据。 该代码有效:

componentDidMount(){
    const posts = axios.get("https://jsonplaceholder.typicode.com/posts");
    console.log(posts);
}

但这不是:

async componentDidMount(){
    const data = await axios.get("https://jsonplaceholder.typicode.com/posts");
    console.log(data)
}

知道为什么它不起作用吗?

3 个答案:

答案 0 :(得分:0)

componentDidMount中没有特殊的地方可以防止其异步。此特定问题看起来像是Axios问题。使用fetch进行检查非常容易:

async componentDidMount() {
    const data = await fetch("https://jsonplaceholder.typicode.com/posts");
    console.log(await data.json())
}

答案 1 :(得分:0)

说“此代码有效”时所指的含义还不清楚: 控制台中的输出将不是您的帖子列表,对吧?

但是您不需要使用async / await,它们只是语法糖。 调用axios.get同步返回的值是Promise,因此您也可以使用thencatch

componentDidMount(){
  axios.get("https://jsonplaceholder.typicode.com/posts")
    .then(console.log)
    .catch(console.error);
}

这样,您不需要在反应中async / await的支持,正如本文指出的那样,正确设置似乎并不容易:https://www.valentinog.com/blog/await-react/ 请注意,该组件仍然会render,因为它不知道您仍在等待数据加载。因此,当数据加载并更新状态时,将需要再次呈现。

答案 2 :(得分:0)

您的两个代码片段都运行正常。

您的代码,

componentDidMount(){
  const posts = axios.get("https://jsonplaceholder.typicode.com/posts");
  console.log(posts);
}

此处console.log(posts)仅返回Promise,而不返回实际数据。

并使用async / await

async componentDidMount(){
    const posts = await axios.get("https://jsonplaceholder.typicode.com/posts");
    console.log(posts);
    console.log(posts.data);
    console.log(JSON.stringify(posts.data))
    console.log(JSON.stringify(posts.data[0]));
}

这里,

console.log(posts)-将返回Promise对象,而不是实际数据

console.log(posts.data)-这将返回实际的数据数组

console.log(JSON.stringify(posts.data))-这将返回stringified版的实际数据

console.log(JSON.stringify(posts.data[0]))-这将返回实际数据中第一记录的stringified版本。

Demo