How to make a rest post call from ReactJS code

Question

I am new to ReactJS and UI and I wanted to know how to make a simple REST based POST call from ReactJS code   If there is any example present it would be really helpful

User · Answer

Here is an example  https   jsfiddle net 69z2wepo 9888     ajax       type   POST       url    some url       data  data         done function result        this clearForm        this setState  result result           bind this     fail function jqXhr        console log  failed to register            It used jquery ajax method but you can easily replace it with AJAX based libs like axios  superagent or fetch

User · Answer

you can install superagent  npm install superagent --save   then for make post call to server  import request from        node modules superagent superagent    request  post  http   localhost userLogin    set  Content-Type    application x-www-form-urlencoded    send   username   username   password   password      end function err  res   console log res text

User · Answer

Here is a util function modified  another post on stack  for get and post both  Make Util js file   let cachedData   null  let cachedPostData   null   const postServiceData    url  params    gt        console log  cache status    cachedPostData        if  cachedPostData     null            console log  post-data  requesting data            return fetch url                method   POST               headers                   Accept    application json                  Content-Type    application json                              body  JSON stringify params                        then response   gt                cachedPostData   response json                return cachedPostData                    else           console log  post-data  returning cachedPostData data            return Promise resolve cachedPostData            const getServiceData    url    gt        console log  cache status    cachedData        if  cachedData     null            console log  get-data  requesting data            return fetch url               then response   gt                cachedData   response json                return cachedData                    else           console log  get-data  returning cached data            return Promise resolve cachedData             export    getServiceData  postServiceData      Usage like below in another component  import   getServiceData  postServiceData   from       Utils Util    constructor props        super props      this state           datastore                 componentDidMount        gt          let posturl    yoururl        let getdataString     name   xys   date  today          postServiceData posturl  getdataString         then items   gt             this setState   datastore  items           console log items

User · Answer

As of 2018 and beyond  you have a more modern option which is to incorporate async await in your ReactJS application  A promise-based HTTP client library such as axios can be used  The sample code is given below   import axios from  axios       class Login extends Component       constructor props  context            super props  context           this onLogin   this onLogin bind this                         async onLogin             const   email  password     this state          try              const response   await axios post   login     email  password                console log response             catch  err

User · Answer

I think this way also a normal way  But sorry  I can t describe in English      x000D   x000D      submitHandler   e   gt    x000D      e preventDefault   x000D      console log this state  x000D      fetch  http   localhost 5000 questions    x000D          method   POST   x000D          headers    x000D              Accept   application json   x000D                       Content-Type    application json   x000D             x000D          body  JSON stringify this state  x000D         then response   gt    x000D              console log response  x000D             x000D           catch error   gt   x000D              console log error  x000D             x000D       x000D    x000D   x000D   x000D    https   googlechrome github io samples fetch-api fetch-post html  fetch  url questions                method   POST               headers                    Accept   application json                            Content-Type    application json                              body  JSON stringify this state             then response                      console log response                              catch error                     console log error

User · Answer

Another recently popular packages is   axios  Install   npm install axios --save  Simple Promise based requests    axios post   user         firstName   Fred       lastName   Flintstone          then function  response        console log response           catch function  error        console log error

User · Answer

Straight from the React docs   fetch  https   mywebsite com endpoint        method   POST     headers         Accept    application json        Content-Type    application json          body  JSON stringify       firstParam   yourValue       secondParam   yourOtherValue              This is posting JSON  but you could also do  for example  multipart-form

User · Answer

React doesn t really have an opinion about how you make REST calls  Basically you can choose whatever kind of AJAX library you like for this task   The easiest way with plain old JavaScript is probably something like this   var request   new XMLHttpRequest    request open  POST     my url   true   request setRequestHeader  Content-Type    application json  charset UTF-8    request send data     In modern browsers you can also use fetch   If you have more components that make REST calls it might make sense to put this kind of logic in a class that can be used across the components  E g  RESTClient post

User · Answer

Here is a the list of ajax libraries comparison based on the features and support  I prefer to use fetch for only client side development or isomorphic-fetch for using in both client side and server side development   For more information on isomorphic-fetch vs fetch

[reactjs] How to make a rest post call from ReactJS code?

Examples related to reactjs

Examples related to reactjs-flux

Examples related to reactjs-native