Jay's Blog

Why I prefer axios over fetch() ?

JAY KALIA's photo
JAY KALIA
·

3 min read

Why I prefer axios over fetch() ?

A while ago I published a blog on how to use Axios to fetch data in your react app . Nevertheless, it's important to acknowledge the fact that Axios won't always be the ideal solution, and that there are sometimes better options.

I, like many other developers prefer Axios over built-in methods because of its ease of use. Let's go through some of the reasons on why Axios over fetch().

Syntax

Axios get and post request 

//Get request
  axios.get("myUrl")
  .then(response => console.log(response.data))
  .catch(err => console.error(err))

//Post request
axios({
  method: "post",
  url: "myUrl" ,
  data: myData,
  headers: myHeaders ,
})
  .then(response => console.log(response))

fetch() get and post request 

//Get request
fetch('myUrl')
  .then(response => response.json())
  .then(data => console.log(data)).
  .catch(err=>console.error(err))

//Post request
const options = {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  body: JSON.stringify(myBody)
};

fetch('myUrl', options)
  .then(response => console.log(response.status))

Through the above syntax we can see that Axios automatically stringifies the data, while sending request. However, with fetch() you'll have to do it manually.

Automatic transormation of data is a nice feature to have.

Axios is more backward compatible

One of the major reasons behind extensive use of Axios is the fact that it has wide browser support(even old browsers) contrary to fetch, which limits the usage of fetch() API.

Wanna see the compatability table ?

HTTP interceptors

Another important feature that Axios provides is its ability to intercept HTTP requests. HTTP interceptors come in handy when you need to examine or change HTTP requests from your application to the server or vice versa (e.g., logging, authentication, etc.)

axios.interceptors.request.use(config => {
  // log a message before any HTTP request is sent
  console.log('Request was sent');

  return config;
});

// sent a GET request
axios.get('myUrl')
  .then(response => {
    console.log(response.data);
  });

By default, fetch() doesn’t provide a way to intercept requests. Although you can come up with a workaround for the same.

Simplicity of setting a reponse timeout

In Axios you can use the timeout property in the config object in order to set the time after which the request will be aborted. 

axios({
  method: 'post',
  url: 'myUrl',
  timeout: 4000,    // 4 seconds timeout
  data: myData
})
.then(response => {/* handle the response */})
.catch(error => console.error('timeout exceeded'))

Although, fetch() too provides a workaround for this with the AbortController interface, but it's not as simple as Axios.

Conclusion

This blog demonstrates that Axios keeps the code minimal, it supports almost all modern browsers and NodeJS environments.

On the other hand, Fetch API isn’t far off either as a native method supported by all the major browsers (it doesn’t support IE).

However, we can not stick to a single aspect in choosing the best option. Instead, you need to evaluate all these features and decide what’s best for your project based on its requirements.

Thank you for reading 🙏

Reactaxioshttpfull stack