fetch vs axios
If you are familiar with JavaScript you have probably have heard of ‘fetch’, or maybe ‘The Fetch API’, a function used in JavaScript to access APIs and making HTTP requests. From there the data could be converted to JSON (JavaScript Object Notation) and then manipulated for whatever need the application requires. Fetch is stand issue for JavaScript, a built in function that will get the job done. However if you are familiar with other JS libraries such as React, you ma have come across ‘axios’ which is another JavaScript library for making the same requests. One might not be necessary better than the other and at the end of the day it comes down to personal preference, but this post (not POST) is meant to compare these to functions.
Lets take a look at a very simple GET request using ‘fetch’
const url = //whatever url you are fetching from. Could also simply be passed in as an argument.fetch(url)
.then(response => {
// handle the response
}) .catch(error => {
// handle the error
});
‘fetch’ is asynchronous which means that it will work simultaneously with other functions and methods in an application as getting data can take some time, relatively speaking. Async functions return a ‘promise’ which is basically the function saying “Hey, I’m going to try to start something now and finish it later. If it works I will do one thing, if not I will do something else.” That ‘something else’ is handled by the ‘.catch’ method which fires if something goes wrong.
Somewhere in the ‘.then’ method you will have to include converting the response to JSON so that the data you retrieve can then be mapped or manipulate however you like. This results in a multi step process with a lot of syntax and therefore increases the chance for an error. If you are looking for maybe a cleaner way to do this. Axios is here for you.
As it is an outside library it must first be installed, so run ‘npm install axios’ in your terminal.
If we looked at that same GET request example:
axios.get(url goes here)
.then(response => {
do whatever you want with your data here;
})
.catch(error => console.log(error))Axios is asynchronous and returns a promise just like ‘fetch’, but it streamlines the process by automatically converting the response of the HTTP request to JSON whereas it must be specified in ‘fetch’. That’s a few lines of code taken care of automatically.
When it comes to other types of HTTP requests (POST, DELETE, etc.) ‘fetch’ requires headers and content type included in the request. Axios has methods built in which can make it easier to setup and read. Examples include:
axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.options(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])
As stated earlier, ‘fetch’ and ‘axios’ essentially do the same thing so it comes down to personal preference. It’s important to understand the similarities and differences between the two when making your decision.
