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

Question

我想在React.js应用程序中使用Async/Await向我的服务器发出一个简单的请求。 服务器加载在/data一个简单的JSON它看起来像这样

JSON

{ 
    id: 1, 
    name: "Aditya" 
} 

我能够用简单的jQuery AJAX GET方法的数据让我的应用程序作出反应。 但是，我想利用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> 
    ); 
} 
} 

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

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

我这不是正确地实现它？

Answer 1

两个问题跳出来：

1. 你getData永远不会返回任何东西，所以它的诺言（async函数总是返回一个承诺）将与undefined解决时，它解决了

2. 错误信息清楚地表明你试图直接渲染承诺getData回报，而不是等待它解决，然后渲染分辨率

寻址＃1：getData应该回调用json的结果：

async getData(){ 
    const res = await axios('/data'); 
    return 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 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而不是then和catch之间使用await的偏好。你可以通过在其中嵌入一个async IIFE函数并确保函数不会抛出。 （componentDidMount本身不能是async，没有东西会消耗这个承诺。）：

class App extends React.Component{ 
    async getData() { 
     const res = await axios('/data'); 
     return 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: '' 
    } 
    } 
    async getData(){ 
    const res = await axios('/data'); 
    const data = await res.data; 
    this.setState({serverResponse: data}) 
} 
render(){ 
    return(
    <div> 
     {this.getData()} 
    </div> 
); 
} 
} 

如果你正试图使各项活动，例如点击后要求，然后调用该事件getData()和替换功能的它，像这样的内容：

async getData(username, password){ 
const res = await axios.post('/data', { 
    username, 
    password 
}); 
... 
} 

此外，如果你做任何请求时，该组件是要加载，然后只需更换async getData()与async componentWillMount()并更改渲染功能，如下所示：

render(){ 
return (
    <div>{this.state.serverResponse}</div> 
) 
}