我正在尝试使用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)
}
知道为什么它不起作用吗?
答案 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
,因此您也可以使用then
和catch
:
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
版本。