Faraz Kelhini JavaScript developer.

Axios vs. fetch(): Which is best for making HTTP requests?

6 min read 1932

Axios Or Fetch(): Which Should You Use?

Editor’s note: This article was updated on 31 January 2022 to reflect the most recent version of Axios (v0.25.x).

Is Axios better than fetch()?

In my recent post “How to make HTTP requests like a pro with Axios,” I discussed the benefits of using the Axios library. Nevertheless, it’s important to acknowledge that Axios is not always an ideal solution, and there are sometimes better options for making HTTP requests.

Without question, some developers prefer Axios over built-in APIs for its ease of use. But many overestimate the need for such a library. The fetch() API is perfectly capable of reproducing the key features of Axios, and it has the added advantage of being readily available in all modern browsers.

In this article, we will compare fetch() and Axios to see how they can be used to perform different tasks, and by the following qualities:

Hopefully, by the end of the article, you’ll have a better understanding of both APIs.

Basic syntax

Before we delve into more advanced features of Axios, let’s compare its basic syntax to fetch().

Here’s how you can use Axios to send a [POST] request with custom headers to a URL. Axios automatically converts the data to JSON, so you don’t have to:

// axios

const url = 'https://jsonplaceholder.typicode.com/posts'
const data = {
  a: 10,
  b: 20,
  .post(url, data, {
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json;charset=UTF-8",
  .then(({data}) => {

Now compare this code to the fetch() version, which produces the same result:

// fetch()

const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  body: JSON.stringify({
    a: 10,
    b: 20,
fetch(url, options)
  .then((response) => response.json())
  .then((data) => {

Notice that:

  • To send data, fetch() uses the body property for a post request to send data to the endpoint, while Axios uses the data property
  • The data in fetch() is transformed to a string using the JSON.stringify method
  • Axios automatically transforms the data returned from the server, but with fetch() you have to call the response.json method to parse the data to a JavaScript object. More info on what the response.json method does can be found here
  • With Axios, the data response provided by the server can be accessed with in the data object, while for the fetch() method, the final data can be named any variable

Backward compatibility

One of the main selling points of Axios is its wide browser support. Even old browsers like IE11 can run Axios without any issue. This is because it uses XMLHttpRequest under the hood.

Fetch(), on the other hand, only supports Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.3+ (you can see the full compatibly table on CanIUse.com).

If your only reason for using Axios is backward compatibility, you don’t really need an HTTP library. Instead, you can use fetch() with a polyfill like this to implement similar functionality on web browsers that do not support fetch().

To begin using the fetch() polyfill, install it via npm command like so:

npm install whatwg-fetch --save

Then, you can make requests like this:

import 'whatwg-fetch'

Keep in mind that that you might also need a promise polyfill in some old browsers.

Response timeout

The simplicity of setting a timeout in Axios is one of the reasons some developers prefer it to fetch(). In Axios, you can use the optional timeout property in the config object to set the number of milliseconds before the request is aborted.

For example:

  method: 'post',
  url: '/login',
  timeout: 4000,    // 4 seconds timeout
  data: {
    firstName: 'David',
    lastName: 'Pollock'
.then(response => {/* handle the response */})
.catch(error => console.error('timeout exceeded'))

Fetch() provides similar functionality through the AbortController interface. It’s not as simple as the Axios version, though:

const controller = new AbortController();
const options = {
  method: 'POST',
  signal: controller.signal,
  body: JSON.stringify({
    firstName: 'David',
    lastName: 'Pollock'
const promise = fetch('/login', options);
const timeoutId = setTimeout(() => controller.abort(), 4000);

  .then(response => {/* handle the response */})
  .catch(error => console.error('timeout exceeded'));

Here, we created an AbortController object using the AbortController.abort() constructor, which allows us to abort the request later. Signal is a read-only property of AbortController, providing a means to communicate with a request or abort it. If the server doesn’t respond in less than four seconds, controller.abort() is called, and the operation is terminated.

Automatic JSON data transformation

As we saw earlier, Axios automatically stringifies the data when sending requests (though you can override the default behavior and define a different transformation mechanism). When using fetch(), however, you’d have to do it manually.


// axios
  .then(response => {
  }, error => {

// fetch()
  .then(response => response.json())    // one extra step
  .then(data => {
  .catch(error => console.error(error));

Automatic transformation of data is a nice feature to have, but again, it’s not something you can’t do with fetch().

HTTP interceptors

One of the key features of Axios is its ability to intercept HTTP requests. HTTP interceptors come in handy when you need to examine or change HTTP requests from your application to the server or vice versa (e.g., logging, authentication, or retrying a failed HTTP request).

With interceptors, you won’t have to write separate code for each HTTP request. HTTP interceptors are helpful when you want to set a global strategy for how you handle request and response.

Here’s how you can declare a request interceptor in Axios:

axios.interceptors.request.use(config => {
  // log a message before any HTTP request is sent
  console.log('Request was sent');

  return config;

// sent a GET request
  .then(response => {

In this code, the axios.interceptors.request.use() method is used to define code to be run before an HTTP request is sent. Also, axios.interceptors.response.use() can be used to intercept the response from the server. Let’s say there is a network error; using the response interceptors, you can retry that same request using interceptors.

By default, fetch() doesn’t provide a way to intercept requests, but it’s not hard to come up with a workaround. You can overwrite the global fetch() method and define your own interceptor, like this:

fetch = (originalFetch => {
  return (...arguments) => {
    const result = originalFetch.apply(this, arguments);
      return result.then(console.log('Request was sent'));

  .then(response => response.json())
  .then(data => {

Download progress

Progress indicators are very useful when loading large assets, especially for users with slow internet speed. Previously, JavaScript programmers used the XMLHttpRequest.onprogress callback handler to implement progress indicators.

The Fetch API doesn’t have an onprogress handler. Instead, it provides an instance of ReadableStream via the body property of the response object.

The following example illustrates the use of ReadableStream to provide users with immediate feedback during image download:

<!-- Wherever you html is -->
  <div id="progress" src="">progress</div>
  <img id="img">

'use strict'
const element = document.getElementById('progress');
  .then(response => {
    if (!response.ok) {
      throw Error(response.status+' '+response.statusText)
    // ensure ReadableStream is supported
    if (!response.body) {
      throw Error('ReadableStream not yet supported in this browser.')
    // store the size of the entity-body, in bytes
    const contentLength = response.headers.get('content-length');
    // ensure contentLength is available
    if (!contentLength) {
      throw Error('Content-Length response header unavailable');
    // parse the integer into a base-10 number
    const total = parseInt(contentLength, 10);
    let loaded = 0;
    return new Response(
      // create and return a readable stream
      new ReadableStream({
        start(controller) {
          const reader = response.body.getReader();
          function read() {
            reader.read().then(({done, value}) => {
              if (done) {
              loaded += value.byteLength;
              progress({loaded, total})
            }).catch(error => {
  .then(response => 
    // construct a blob from the data
  .then(data => {
    // insert the downloaded image into the page
    document.getElementById('img').src = URL.createObjectURL(data);
  .catch(error => {
function progress({loaded, total}) {
  element.innerHTML = Math.round(loaded/total*100)+'%';

Implementing a progress indicator in Axios is simpler, especially if you use the Axios Progress Bar module. First, you need to include the following style and scripts:

// the head of your HTML
    <link rel="stylesheet" type="text/css"
        href="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/0a3acf92/dist/nprogress.css" />

// the body of your HTML
     <img id="img" />
    <button onclick="downloadFile()">Get Resource</button>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/0a3acf92/dist/index.js"></script>

// add the following to customize the style

    #nprogress .bar {
        background: red !important;
    #nprogress .peg {
        box-shadow: 0 0 10px red, 0 0 5px red !important;
    #nprogress .spinner-icon {
        border-top-color: red !important;
        border-left-color: red !important;

Then you can implement the progress bar like this:

    <script type="text/javascript">

        function downloadFile() {

        function getRequest(url) {
            .get(url, { responseType: "blob" })
            .then(function (response) {
              const reader = new window.FileReader();
              reader.onload = () => {
                document.getElementById("img").setAttribute("src", reader.result);
            .catch(function (error) {

This code uses the FileReader API to asynchronously read the downloaded image. The readAsDataURL method returns the image’s data as a Base64-encoded string, which is then inserted into the src attribute of the img tag to display the image.

Simultaneous requests

To make multiple simultaneous requests, Axios provides the axios.all() method. Simply pass an array of requests to this method, then use axios.spread() to assign the properties of the response array to separate variables:

.then(axios.spread((obj1, obj2) => {
  // Both requests are now complete
  console.log(obj1.data.login + ' has ' + obj1.data.public_repos + ' public repos on GitHub');
  console.log(obj2.data.login + ' has ' + obj2.data.public_repos + ' public repos on GitHub');

You can achieve the same result by using the built-in Promise.all() method. Pass all fetch requests as an array to Promise.all(). Next, handle the response by using an async function, like this:

.then(async([res1, res2]) => {
  const a = await res1.json();
  const b = await res2.json();
  console.log(a.login + ' has ' + a.public_repos + ' public repos on GitHub');
  console.log(b.login + ' has ' + b.public_repos + ' public repos on GitHub');
.catch(error => {


Axios provides an easy-to-use API in a compact package for most of your HTTP communication needs. However, if you prefer to stick with native APIs, nothing stops you from implementing Axios features.

As discussed in this article, it’s perfectly possible to reproduce the key features of the Axios library using the fetch() method provided by web browsers. Ultimately, whether it’s worth loading a client HTTP API depends on whether you’re comfortable working with built-in APIs.

Get set up with LogRocket's modern error tracking in minutes:

  1. Visit https://logrocket.com/signup/ to get an app ID
  2. Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not server-side
  3. $ npm i --save logrocket 

    // Code:

    import LogRocket from 'logrocket';
    Add to your HTML:

    <script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
    <script>window.LogRocket && window.LogRocket.init('app/id');</script>
  4. (Optional) Install plugins for deeper integrations with your stack:
    • Redux middleware
    • NgRx middleware
    • Vuex plugin
Get started now
Faraz Kelhini JavaScript developer.

20 Replies to “Axios vs. fetch(): Which is best for making HTTP…”

  1. i’m not a developer or “power” user when it comes to my system – i’m wondering if axios is for someone like me. i have to upload files to my vendor’s ftp site – i can’t use google drive or dropbox because the vendor wants the files placed inside their ftp space. i can’t use fetch because it’s no longer supported by my OS, mojave. 🙁

    TIA! Dannielle

  2. There is also the fact that axios handles error responses differently from fetch.
    For fetch only network errors are actual errors.
    For axios perfectly successful server communication that happens to return 400+ responses is also an error.

  3. thanks for the amazing explanations and demonstrations.
    you made the hello world more fetch-able
    i will use fetch more thanks2u
    Shabat Shalom => (-_0)

    1. let fileSize = ”; // you can get fileSize in input[type=file] onchange event
      let uploadedByte = 0;
      fetch().then(res => {
      let reader = res.body.getReader();
      reader.read().then(({ done, value }) => {
      if (done) {
      console.log(‘upload completed’);
      uploadedByte += value.byteLength;
      console.log(‘uploaded: ‘ + uploadedByte);
      console.log(‘progress: (uploadedByte/fileSize * 100).toFixed());

  4. Nice article and a great source of info when you are trying to implement all of these features.

    I would also include that fetch is stricter than XHR when it comes to CORS requests and cookies.
    Specifically, fetch does not send cookies on CORS requests, unless { credentials: ‘include’ } is used and once you do that, the Access-Control-Allow-Origin header can no longer be “*”.

    This may be a good thing or a bad thing depending on your use case I suppose. In my previous company, we had a corporate proxy that used cookies and it completely broke all of our CORS requests to public APIs that only send back Access-Control-Allow-Origin: “*” instead of parroting our Origin header. We had to actually force the polyfill on all browsers in order to fallback to XHRs and avoid the issue all together.

    See details here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

  5. Can Axios’s interceptors be applied to some instances of Axios, but not other instances?

  6. I need to do that for work and have used Cyberduck. I believe it is still free, and works like a champ on Mac.

  7. I recently needed to log the results of multiple API calls, and the log needed to contain both the response status and a small extract of the response body.

    fetch() made this quite difficult to do both at once whilst also keeping the code clean, since getting the response body is another level of async (for some reason?).

    It looks like this would have been trivial to do in Axios e.g:

    const logCallInformation = response => {

    const responseStatus = response.status
    const usefulData = extractUsefulBit(response.data)
    logger.log(options, responseStatus, usefulData)


    So +1 for Axios from me.

    1. fetch makes much more sense here, since it allows you to not process a response after looking at the headers, while doing what you want isn’t difficult at all either:

      const response = await fetch(options)
      const data = await response.json()
      logger.log(options, response.status, extractUsefulBit(data))

  8. fetch() not always working properly. I tried to post request to express.js server – but i haven`t had success. The fetch return underined result (in .then(data=>{})) afer result.json()…

  9. I love your articles, but this is an unfair comparison. The only fair comparison for fetch is XHR. It would be more helpful and fair if you compared axios with fetch wrappers like ky, ofetch and wretch. I hope you’ll consider doing such a comparison as I’m having trouble deciding on a wrapper!

Leave a Reply