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