Use Async Await with Axios in React js

Question

Following   How to use async await with axios in react  I am trying to make a simple get request to my server using Async Await in a React js App   The server loads a simple JSON at  data which looks like this  JSON       id  1     name   Aditya      I am able to get the data to my React App using simple jquery ajax get method  However  I want to make use of axios library and Async Await to follow ES7 standards  My current code looks like this   class App extends React Component   async getData         const res   await axios   data         console log res json         render         return            lt div gt                this getData              lt  div gt                 Using this approach I get the following error       Objects are not valid as a React child  found   object Promise    If   you meant to render a collection of children  use an array instead    Am I not implementing it correctly

User · Answer

Async Await with axios     useEffect      gt             const getData   async      gt            await axios get  your url            then res   gt              console log res                      catch err   gt              console log err                            getData

User · Answer

In my experience over the past few months  I ve realized that the best way to achieve this is   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        lt div gt          this state serverResponse        lt  div gt              If you are trying to make post request on events such as click  then call getData   function on the event and replace the content of it like so   async getData username  password    const res   await axios post  url-to-post-the-data        username     password               Furthermore  if you are making any request when the component is about to load then simply replace async getData   with async componentDidMount   and change the render function like so   render     return      lt div gt  this state serverResponse  lt  div gt

User · Answer

Two issues jump out    Your getData never returns anything  so its promise  async functions always return a promise  will resolve with undefined when it resolves The error message clearly shows you re trying to directly render the promise getData returns  rather than waiting for it to resolve and then rendering the resolution   Addressing  1  getData should return the result of calling json   async getData       const res   await axios   data       return await res json        Addressig  2  We d have to see more of your code  but fundamentally  you can t do   lt SomeElement gt  getData    lt  SomeElement gt       because that doesn t wait for the resolution  You d need instead to use getData to set state   this getData   then data   gt  this setState  data                   catch err   gt         handle the error              and use that state when rendering    lt SomeElement gt  this state data  lt  SomeElement gt      Update  Now that you ve shown us your code  you d need to do something like this   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   gt  this setState  data                               catch err   gt         handle the error                             render             return                lt div gt                   this state data    lt em gt Loading    lt  em gt    this state data               lt  div gt                       Futher update  You ve indicated a preference for using await in componentDidMount rather than then and catch  You d do that by nesting an async IIFE function within it and ensuring that function can t throw   componentDidMount itself can t be async  nothing will consume that promise   E g    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      gt                    try                       this setState  data  await this getData                        catch  e                             handle the error                                                            render             return                lt div gt                   this state data    lt em gt Loading    lt  em gt    this state data               lt  div gt

[javascript] Use Async/Await with Axios in React.js

Examples related to javascript

Examples related to json

Examples related to reactjs

Examples related to asynchronous

Examples related to ecmascript-2017