Axios vs Fetch
Tags: javascript, reactnative, react, angular
Published: 2021-06-22 16:48:43

Hello [Developers](https://www.kpiteng.com/services/mobile-app-development/react-native-app-development)! 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 => {

  })
```
**Fetch** — has no url in request object.
```
 fetch(url)
  .then((response) => response.json())
  .then((json) => {  
   
  })
  .catch(() => {
  
  })
```

###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;
  });
```
**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(() => {
  
});
```

>If you want to start New React Project — Check out [React Clean Architecture](https://www.kpiteng.com/blogs/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;
  })
```
**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(() => {


  })
```

###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
```
**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](https://www.linkedin.com/company/kpiteng/) | [Facebook](https://www.facebook.com/kpiteng) | [Instagram] (https://www.instagram.com/kpiteng)