在React.js中使用异步/等待与Axios
下面是
在React.js应用程序中，我试图使用异步/等待向服务器发出一个简单的get请求。服务器在/data上加载一个简单的JSON，如下所示
JSON
{
id: 1,
name: "Aditya"
}我可以使用简单的方法将数据发送到。但是，我想利用axios库和异步/等待来遵循ES7标准。我的当前代码如下：
class App extends React.Component{
async getData(){
const res = await axios('/data');
console.log(res.json());
}
render(){
return(
<div>
{this.getData()}
</div>
);
}
}使用这种方法，我得到以下错误：
对象作为React子对象无效(找到:对象承诺)。如果您打算呈现一个子集合，请使用数组代替。
我没有正确地实现它吗？
回答 3
Stack Overflow用户
发布于 2017-10-13 15:42:18
有两个问题要提出来：
- 您的
getData从不返回任何东西，因此如果它不拒绝，它的承诺(async函数总是返回承诺)将用undefined来实现。 - 错误消息清楚地显示，您正在尝试直接呈现承诺
getData返回，而不是等待它结算，然后呈现实现值
寻址#1：getData应该返回调用json的结果
async getData(){
const res = await axios('/data');
return await res.json();
}Addressig #2:我们必须看到更多您的代码，但从根本上说，您不能这样做
<SomeElement>{getData()}</SomeElement>不等待决议的...because。相反，您需要使用getData设置状态：
this.getData().then(data => this.setState({data}))
.catch(err => { /*...handle the error...*/});...and在呈现时使用该状态：
<SomeElement>{this.state.data}</SomeElement>Update：现在您已经向我们展示了您的代码，您需要这样做：
class App extends React.Component{
async getData() {
const res = await axios('/data');
return await res.json(); // (Or whatever)
}
constructor(...args) {
super(...args);
this.state = {data: null};
}
componentDidMount() {
if (!this.state.data) {
this.getData().then(data => this.setState({data}))
.catch(err => { /*...handle the error...*/});
}
}
render() {
return (
<div>
{this.state.data ? <em>Loading...</em> : this.state.data}
</div>
);
}
}进一步更新：您已经表明了在componentDidMount中使用await而不是then和catch的偏好。要做到这一点，您可以在其中嵌套一个async生命函数，并确保该函数不能抛出。(componentDidMount本身不可能是async，没有什么东西会消耗这一承诺。)例如：
class App extends React.Component{
async getData() {
const res = await axios('/data');
return await res.json(); // (Or whatever)
}
constructor(...args) {
super(...args);
this.state = {data: null};
}
componentDidMount() {
if (!this.state.data) {
(async () => {
try {
this.setState({data: await this.getData()});
} catch (e) {
//...handle the error...
}
})();
}
}
render() {
return (
<div>
{this.state.data ? <em>Loading...</em> : this.state.data}
</div>
);
}
}Stack Overflow用户
发布于 2017-12-18 07:57:00
根据我过去几个月的经验，我意识到实现这一目标的最佳方法是：
class App extends React.Component{
constructor(){
super();
this.state = {
serverResponse: ''
}
}
componentDidMount(){
this.getData();
}
async getData(){
const res = await axios.get('url-to-get-the-data');
const { data } = await res;
this.setState({serverResponse: data})
}
render(){
return(
<div>
{this.state.serverResponse}
</div>
);
}
}如果您试图对诸如单击之类的事件发出post请求，则对事件调用getData()函数，并将其内容替换如下：
async getData(username, password){
const res = await axios.post('url-to-post-the-data', {
username,
password
});
...
}此外，如果您在组件即将加载时发出任何请求，那么只需将async getData()替换为async componentDidMount()，并将呈现函数更改如下：
render(){
return (
<div>{this.state.serverResponse}</div>
)
}Stack Overflow用户
发布于 2022-09-28 11:54:50
async fetchCatFacts() {
await axios.get("//localhost:8082/api_v1/orders", {})
.then((response) => {
this.catFacts = response.data.data;
console.log("resp", response.data);
});
https://stackoverflow.com/questions/46733354
复制相似问题
腾讯云开发者
