DEV Community

Cover image for Axios vs Fetch
kpiteng
kpiteng

Posted on

Axios vs Fetch

Hello Developers! All we are using either Axios OR fetch to communicate/exchange data with server. Both works perfect as per your requirement. Today we will go in detail and see how they are differ in terms of features they provide.

1. Request URL

Axios — has url in request object

axios
  .get(url, {
    headers: {
      'Content-Type': 'application/json',
    },
    timeout: 1000 * 60,
  })
  .then(res => {

  })
  .catch(err => {

  })
Enter fullscreen mode Exit fullscreen mode

Fetch — has no url in request object.

 fetch(url)
  .then((response) => response.json())
  .then((json) => {  

  })
  .catch(() => {

  })
Enter fullscreen mode Exit fullscreen mode

2. Package

Axios — third-party package that you need to install manually. 85.3k Star in Github — Well managed & rich features library.
npm i axios
Fetch — is in-build into most of the browser, no more need of installation.

3. CSRF Protection

Axios — having in-build support of CSRF (Cross site request forgery) to prevent cross-site request.
Fetch — doesn’t support CSRF

4. Request Data

Axios — request data contain object, you can directly sent JSON Object in request data

axios
  .post(url, jsonObject, {
    headers: {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    },
    timeout: 1000 * 60, // 1 min
  })
  .then((res) => {
    if (res) {
      return res.data;
    }
  })
  .catch((err) => {
    return err;
  });
Enter fullscreen mode Exit fullscreen mode

Fetch — request data should stringify

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(jsonObject),
})
.then((response) => response.json())

.then((json) => {

})
.catch(() => {

});
Enter fullscreen mode Exit fullscreen mode

If you want to start New React Project — Check out React Clean Architecture

5. Response Parsing

Axios — in-built transform response to JSON for
developers

axios
  .post(url, jsonObject, {
    headers: {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    },
    timeout: 1000 * 60, // 1 min
  })
  .then(res => {
    if (res) {
      return res.data; // Directly get JSON in Step - 1 Only - Managed by Axios
    }
  })
  .catch(err => {
    return err;
  })
Enter fullscreen mode Exit fullscreen mode

fetch — has two step process, first response convert to json and then in second process developer will get json response

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(jsonObject)
}).then((response) => response.json()) // Response Convert To JSON in this Step - 1
  .then((json) => {
    // Get JSON Object Here in Step - 2
  })
  .catch(() => {


  })
Enter fullscreen mode Exit fullscreen mode

6. Cancel Request

Axios — In case user left the screen/component, axios allow developers to Cancel request

const cancelTokenSource = axios.CancelToken.source();

 axios.get('/listing/1', {
  cancelToken: cancelTokenSource.token
 });

 // Cancel request
 cancelTokenSource.cancel();
 Fetch - doesn’t support Cancel API request
Enter fullscreen mode Exit fullscreen mode

Fetch — doesn’t support Cancel API request

7. Request Interceptor

Axios — having in-build feature of intercept HTTP Request
Fetch — Doesn’t provide a way to intercept http requests.

8. Upload/Download Request Progress

Axios — Support developers to provide data transmission progress so developers can show loading indicator while user communicating with server
Fetch — Doesn’t support Upload/Download progress

9. Browser Support

Axios — have side browser capability support
Fetch — only support limited browsers & version , like Chrome 42+, Firefox 39+, Edge 14+, Safari 10.1.

Thanks for reading Blog!

KPITENG | DIGITAL TRANSFORMATION
www.kpiteng.com/blogs | hello@kpiteng.com
Connect | Follow Us On - Linkedin | Facebook | Instagram

Top comments (7)

Collapse
 
link2twenty profile image
Andrew Bone

Interesting article, I've never really used Axios.

Fetch can use the Abort Controller API to cancel requests. Also progress is coming.

I think it would be very simple to write a wrapper for fetch with fallbacks in place for old browsers.

Collapse
 
link2twenty profile image
Andrew Bone

In fact here's a demo of loading progress. The loading is slowed down so you have time to see the bar do something.

The syntax is more complex than axios but it's built into the browser so will be faster.

Collapse
 
kpiteng profile image
kpiteng

Thanks for adding your valuable inputs, I will check and update it. Thanks

Collapse
 
tcelestino profile image
Tiago Celestino

I’ve been working in project that uses fetch and axios and in my opinion, axios is more efficiency than fetch. I dont know axios perfs, but I believe that fetch is fast, but axios is fully customizable and for me is important.

Collapse
 
vishalraj82 profile image
Vishal Raj

Also, AFAIK fetch does not sends cookies by default.

Collapse
 
link2twenty profile image
Andrew Bone

Not cross origin but same origin it does.

Collapse
 
aspraveen profile image
praveen

Nice article