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 => {  })

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 doesnt 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

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 - doesnt support Cancel API request

Fetch doesnt support Cancel API request

7. Request Interceptor

Axios having in-build feature of intercept HTTP Request
Fetch Doesnt 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 Doesnt 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 | [email protected]
Connect | Follow Us On - Linkedin | Facebook | Instagram