Axios vs fetch Ajax

ajax.js

/*
FETCH (-):
1.Handing error with fetch api.
2.Getting api response in 2 steps.
3.No timeout functionality available.
4.Cancelling request.
5.Fetch does not support upload progress.
6.No cookies by default

AXIOS (+):
1. Transformers: allow performing transforms on data before request is made or after response is received.
2. Interceptors: allow you to alter the request or response entirely (headers as well). also perform async operations before request is made or before Promise settles.
3. Built-in XSRF protection.
4. Make XMLHttpRequests from the browser & http requests from node.js.
5. Cancel requests and timeout feature.
*/

// AXIOS =============================
import axios from 'axios';

export default function get_data(){ 
    axios.get('https://jsonplaceholder.typicode.com/todos1/1')
    .then(function (response) {
      console.log(response);
  })
    .catch(function (error) {
      console.log(error);
  });
}

/**
 * Config global for axios/django
 */
axios.defaults.xsrfHeaderName = "X-CSRFToken"
axios.defaults.xsrfCookieName = 'csrftoken'

// Add a response interceptor
axios.interceptors.response.use(function (response) {
  // Do something with response data
  return response;
}, function (error) {
  // Do something with response error
  console.log(error.response.status);
  return Promise.reject(error);
});


// FETCH =============================
function secureFetch(url, method, data) {
  return new Promise((resolve, reject) => {
    fetch(url, {
      method: method || "GET",
      body: JSON.stringify(data),
      headers: {
        "Content-Type": "application/json; charset=utf-8"
      }
    }).then(response => {
      // response only can be ok in range of 2XX
      if (response.ok) {
        // you can call response.json() here too if you want to return json
        resolve(response);
      } else {
        //handle errors in the way you want to
        switch (response.status) {
          case 404:
            console.log('Object not found');
            break;
          case 500:
            console.log('Internal server error');
            break;
          default:
            console.log('Some error occured');
            break;
        }

        //here you also can thorow custom error too
        reject(response);
      }
    })
    .catch(error => {
      //it will be invoked mostly for network errors
      //do what ever you want to do with error here
      console.log(error);
      reject(error);
    });
  });
}

export function fetchRunner() {
secureFetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log(error));

secureFetch('https://jsonplaceholder.typicode.com/posts/100000000')
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log(error));
}