We all know that Axios is a promise-based HTTP client for the browser and node.js. Although I have used Axios extensively while making GET, POST request calls and multiple concurrent requests call from the front end, I have never used Axios in conjunction with node.js. Today we would be discussing how to use Axios for making any kind of calls from the front end and some other Axios related important stuff.
Similar to traditional AJAX call, one could easily make Axios calls without much hustle from the front end. One needs to include below JS library in order to work it properly:
Today we would be touching on below items:
Performing a GET request:
Obviously, @RequestMapping i.e. /saveAssignment would call one of our Controller's methods. Worried about how this data would be available in Controller layers? Don't worry? We got you covered here. Just look at the below code snippet:
Tips: Never use this, when the requests are dependent anyhow.
When using then, one will receive the response as follows:
Point to ponder: Before starting I would like to highlight that the above code snippet is taken from the official website. It's regarding "else if (error.request) {..}" block. It states that "The request was made but no response was received" obviously from the server. Now one open question to you - In Microservice Architecture, suppose service A is calling service B which is down (we have manually stopped it) then no doubt it would enter in catch block but where would the control go, if, else if or last else block?
According to me, it should go inside else if block as the server is down(service B) but we have made the request properly. But to my surprise, it entered inside if block. But how can that happen when the server was down? How the server can respond? Just for information, in JS, we are getting Internal Server Error(500 status code) whereas in STS console, 404. If you have the answer to the above question or any logical explanation then please share in the comment section.
I hope that now you know how to use Axios. It would surely help you while doing development work using Axios. Happy Learning !! ☺
1. Introduction
Similar to traditional AJAX call, one could easily make Axios calls without much hustle from the front end. One needs to include below JS library in order to work it properly:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- How to make Axios GET / POST calls?
- How to make multiple concurrent requests calls?
- How to handle the dependent request calls using Axios?
- Understanding the response to a request
- How to handle errors that occurred while making Axios calls?
2. GET Request
Performing a GET request:
// Make a request for a user with a given ID
axios.get('/getAssignment?id=12345')
.then(function (response) { // handle success
console.log(response);
})
.catch(function (error) { // handle error
console.log(error);
})
.finally(function () { // always executed
...
});
Optionally the above request could also be done as
axios.get('/getAssignment', {
params: {
id: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
3. POST Request
Performing a POST request:
axios.post('/saveAssignment', {
'assignmentData' : assignmentData // an array containing: label,type,availableon,dueon etc
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
@RequestMapping(value = "/saveAssignment", headers = "Content-Type=application/json", method = RequestMethod.POST) @PreAuthorize("isAuthenticated()") public ResponseEntity<String> saveAssignment(Model model, @RequestBody Map<String, String[]> assignmentDataMap) { String[] assignmentData = assignmentDataMap.get("assignmentData"); ... }
4. Multiple concurrent requests
Performing multiple concurrent requests:
function findAssignmentById(assignmentId) {
return axios.get("/getAssignment?id=" + assignmentId);
}
function findAllAssignmentUser(assignmentId) {
return axios.get("/getAssignmentUsers?assignmentid=" + assignmentId);
}
axios.all([findAssignmentById(), findAllAssignmentUser()])
.then(axios.spread(function (assignmentData, userData) {
// Both requests are now complete
var assignment = assignmentData.data;
var users = userData.data;
}));
5. Multiple requests but dependent somehow
It may happen that depending upon the return value from one Axios call, one may require to make another Axios call conditionally. In those cases, one could follow the below approach.
var assignmentId1 = 1234;
axios.get("/getAssignmentUser?id="+assignmentId1).then(function(response) {
var assignmentUserFlag = response.data.size() > 0;
if(assignmentUserFlag){
axios.get("/getAssignment?id="+assignmentId1).then(function(response) {
}).catch(function (error) {
...
});
} else {
....
}
}).catch(function (error) {
...
});
6. Understanding the response to a request
The response to a request contains the following information:
{
// `data` is the response that was provided by the server
data: {},
// `status` is the HTTP status code from the server response
status: 200,
// `statusText` is the HTTP status message from the server response
statusText: 'OK',
// `headers` the headers that the server responded with
// All header names are lower cased
headers: {},
// `config` is the config that was provided to `axios` for the request
config: {},
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request: {}
}
axios.get('/getAssignment?id=12345')
.then(function (response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
7. Handling Errors
You must be thinking about why there is a separate section for this. From the start of this article, we have maintained that inside catch block i.e. ".catch(function (error) { ..}" we would handle the error, End of the Story right? But wait there is still more left to it.
axios.get('/getAssignment?id=12345')
.catch(function (error) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});
According to me, it should go inside else if block as the server is down(service B) but we have made the request properly. But to my surprise, it entered inside if block. But how can that happen when the server was down? How the server can respond? Just for information, in JS, we are getting Internal Server Error(500 status code) whereas in STS console, 404. If you have the answer to the above question or any logical explanation then please share in the comment section.
8. Conclusion
I hope that now you know how to use Axios. It would surely help you while doing development work using Axios. Happy Learning !! ☺
