Making http request in React.js

React JSJavascript LibraryFront End Technology

In a typical web application, client makes a http request through browser and server sends html page in the response with data.

But in a single page application (SPA), we have only one page and whenever client makes http request to server it generally responses with a json/xml formatted data.

For making http request we have some of the below options −

  • XmlHttpRequest
  • Axios
  • Windows fetch

Axios is easy to work with react and handing requests.

Lets install it first

npm install –save axios

Import it in the jsx file before using

import Axios from ‘axios’;

From the component lifecycle post, we observed that componentDidMount is the best place to make side effects like making http requests. Because componentDidMount executes only once in lifetime of a component. once http request gets completed we can update our state asynchronously and page will re-render with that updates.

Axios uses promises to work it in asynchronous way.

componentDidMount(){
   Axios.get(‘url’).then((response)=>{console.log(response)});
}

Then function simply contains a function having argument as response from promises. Inside the then we can use setState to update the data to state object of class.

We can manipulate the data before updating the actual state in componentDidMount. Additionally we can send query parameters in axios.

Based on some changes in state if we want o make another http request then we should use componentDidUpdate . But we have to make sure it does not result into infinite loop by adding conditional logic. Example using an id as an parameter , we can check if it not equal to previous id then we can make new http request here.

Making post requests

Similar to get request we can do post request on button click.

postdata=()=>{
   const postObject={
      //values
   }
   Axios.post(‘url’, postObject).then(response=>{ //process the response});
}

Similar to get, we get the promise on complete of post request.there are other http methods which can be executed in same way.

deleteData=()=>{
   Axios.delete(‘url’).then(response=>{});
}

Handling error with axios

We have catch method after the then method .

Axios.get(‘url’).then(response=>{}).catch(error=>{
   //we can update state to an error to show meaningful message on screen
});

Adding interceptors in axios globally

Sometimes we need to have a common process like adding authentication data or logging while making http request handling.

In index.js file we can add interceptors which will be available for all the axios configs.

Index.js
Import axios from ‘axios’;
Axios.interceptors.request.use(request=>{
   //add logic here on the coming request
   return request;
});

Make sure to return the request also in the interceptors. We can add erro logic as well as shown below

Axios.interceptors.request.use(request=>{
   //add logic here on the coming request
   return request;
}, error=>{
   //add error specific logic
   return Promise.reject(error);
});

Similarly we can add interceptor for response

Axios.interceptors. response.use(response=>{
   //add logic here on the coming response
   return response;
}, error=>{
   //add error specific logic
   return Promise.reject(error);
});

We can make other global configurations for axios like setting a bse url for all requests.

In index.js file add below line

Axios.defaults.baseURL=’your base url’;
raja
Published on 04-Sep-2019 09:21:06
Advertisements