在React.js中使用Async/Await与Axios

Question

正在关注

我正在尝试在 React.js 应用程序中使用 Async/Await 向我的服务器发出简单的 get 请求。服务器在

/data

加载一个简单的 JSON，如下所示

JSON

{
   id: 1,
   name: "Aditya"
}

我可以使用简单的 jquery ajax get 方法将数据获取到我的 React 应用程序。但是，我想利用 axios 库和 Async/Await 来遵循 ES7 标准。我当前的代码如下所示：

class App extends React.Component{
 async getData(){
     const res = await axios('/data');
     console.log(res.json());
 }
 render(){
     return(
         <div>
             {this.getData()}
         </div>
     );
 }
}

使用这种方法，我收到以下错误：

对象作为 React 子对象无效（找到：[object Promise]）。如果您打算渲染子集合，请改用数组。

我没有正确实施吗？

Answer 1

有两个问题跳出来：

你的
```
getData
```
永远不会返回任何东西，所以它的承诺（
```
async
```
函数总是返回一个承诺）如果它不拒绝
```
，将会用
```
undefined
来实现。
错误消息清楚地表明您正在尝试直接渲染承诺
```
getData
```
返回，而不是等待它解决然后渲染履行值

解决#1：

getData

应该返回调用

json

的结果：

async getData(){
   const res = await axios('/data');
   return await res.json();
}

Addressig #2：我们必须查看您的更多代码，但从根本上来说，您做不到

<SomeElement>{getData()}</SomeElement>

...因为那不需要等待解决方案。您需要使用

getData

来设置状态：

this.getData().then(data => this.setState({data}))
              .catch(err => { /*...handle the error...*/});

...并在渲染时使用该状态：

<SomeElement>{this.state.data}</SomeElement>

更新：现在您已经向我们展示了您的代码，您需要执行类似的操作：

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>
        );
    }
}

进一步更新： 您已表示偏好在 await

 中使用

componentDidMount

，而不是

then

和

catch

。您可以通过在其中嵌套一个

async

 IIFE 函数并确保该函数不会抛出异常来实现这一点。 （

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>
        );
    }
}

Answer 2

根据我过去几个月的经验，我意识到实现这一目标的最佳方法是：

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>
  );
 }
}

如果您尝试对单击等事件发出发布请求，请在该事件上调用

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

Answer 3

 async fetchCatFacts() {
    await axios.get("//localhost:8082/api_v1/orders", {})
        .then((response) => {

          this.catFacts = response.data.data;
          console.log("resp", response.data);
        });

Answer 4

在React.js中使用Async/Await与Axios

问题描述投票：0回答：4

4个回答

最新问题

在React.js中使用Async/Await与Axios

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4