An Alternative to Fetch, Using Axios

Right out of the box, modern browsers provide the fetch API for making HTTP requests for resources. Unfortunately, this API isn’t supported by older browsers and so lacks backward compatibility. Although there are workarounds when using the fetch API, a simpler alternative is the Axios HTTP client-side library. Axios provides support across older browsers and provides additional features which would otherwise be more involved in implementing. Getting started is easy and is as follows.

First, the Axios library needs to be installed:

npm install --save axios

After installing Axios, make sure to import it into the module for use. Making requests can be done in a few ways like so:

import axios from 'axios';
axios.get('some-url');
OR
axios({
  url: 'some-url',
  method: 'get'
});

The same can be done for sending POST requests. In addition, unlike the fetch API, the data that is sent in the request does not need to be converted to JSON as Axios handles this by default. For example:

axios({
  url: 'some-url',
  method: 'post',
  data: {
    name: 'my name'
  }
});
OR
axios.post('some-url', {
  name: 'my-name'
});
USING fetch
fetch('some-url', {
  method: 'POST',
  body: JSON.stringify({
    name: 'your name'
  })
});

Some things to note, the data that is sent in the POST request with Axios is assigned to the data property, while in the fetch API it is assigned to the body property. Also, both requests return a Promise which can be consumed but with one less step using Axios. To illustrate:

axios({
  url: 'some-url',
  method: 'post',
  data: {
    name: 'my name'
  }
})
.then(data => console.log(data))
.catch(error => console.log(error));
USING fetch
fetch('some-url', {
  method: 'POST',
  body: JSON.stringify({
    name: 'your name'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));

As you can see, the response from a request using Axios is also parsed and ready to do work on, in this case logged to the console. Using the fetch API requires an additional step of parsing the response in order to use within your program.

Aside from these differences, Axios offers some special features which are useful like HTTP interceptors. These interceptors are functions which are executed for every HTTP request and responses returning from those requests. Some use cases are handling errors and logging responses. To implement:

axios.interceptors.request.use(request => {
  console.log(request);
  return request;
 }, error => {
  console.log(error);
  return Promise.reject(error);
});

In the example above, we are setting up an interceptor for all HTTP requests that are made with Axios. The ‘use’ method allows access to the request before it is sent via its two callback arguments. The first callback simply accesses the request assuming that there are no issues making the request. Here we are logging the request to the console and afterwards the request is returned in order to allow it through to the intended url instead of blocking it. The second callback handles potential errors which are not related to user errors like making a typo in the url for the request but instead are for situations like not having internet connectivity. And again the request is not blocked by returning the rejected Promise.

The same can be done for responses from the server by substituting “request” with “response” in the function call.

axios.interceptors.response.use(...);

After you’re done using the interceptor, you can remove or eject it as follows:

const myReqInterceptor = axios.interceptor.request.use(callback1, callback2);
axios.interceptors.request.eject(myReqInterceptor);

Here, the interceptor is assigned to a variable in order to reference it when removing it within the “eject” method. There are more use cases for interceptors like setting headers for authorization or performing some kind of manipulation to data before it is received by the server or client.

Aside from these examples, Axios provide many more features which provide ease of use like creating instances for various HTTP requests and saving urls to eliminate the need of specifying the url for each HTTP request. And again, these functionalities can be replicated with the fetch API. For more information on using Axios, you can refer to the documentation.

https://github.com/axios/axios