- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Making http request in React.js
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’;
3K+ Views
