Axios or Fetch: what to use in 2019?

Axios is a well-known JavaScript library. It is a Promise-based HTTP client for browsers and Node.js. If you have been working as a JavaScript programmer in the past few years, then you definitely used this library. In October 2019, the Axios package was downloaded from npm 25 million times. It seems that the future of Axios is cloudless. But what if I tell you that Axios is a dead project. This is exactly what one discussion on Reddit was about. Namely, we are talking about the following:

• Axios GitHub repository has a very low level of developer activity.
• Problems and PR are ignored.
• The development team is silent.

The situation is aggravated by widely discussed vulnerability . This vulnerability was reported in 2017. The authors of the project ignored her for more than two years.



When the Axios library became popular, browsers did not have an API that implements a promise-based HTTP client. The standard XML HTTP Request (XHR) interface was inconvenient, it was hard to work with. The developers gladly accepted Axios due to the fact that this library made their life easier.







In 2015, the Fetch API was released. Why are we still using Axios in 2019? Let's compare these two technologies.

Template Code Volume

▍Fetch

fetch('https://jsonplaceholder.typicode.com/todos/1')   .then(response => response.json())   .then(json => console.log(json)) // { //  "userId": 1, //  "id": 1, //  "title": "delectus aut autem", //  "completed": false // }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

▍Axios

 axios.get("https://jsonplaceholder.typicode.com/todos/1")  .then(response => console.log("response", response.data)) // { //  "userId": 1, //  "id": 1, //  "title": "delectus aut autem", //  "completed": false // }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

When using Fetch, you have to deal with two promises. But when working with Axios, we have direct access to the JSON result in the data



property of the response object.



The body mixin json()



method takes a Response stream and reads it completely. It returns a promise that is resolved by the JSON result of parsing the body text of the request.



You need to use even more boilerplate code in Fetch when working with POST requests.

▍Fetch

 fetch("https://jsonplaceholder.typicode.com/posts", {  method: "POST",  body: JSON.stringify({    title: "Title of post",    body: "Post Body"  }) })  .then(res => {    if (!response.ok) throw Error(response.statusText);    return response.json();  })  .then(data => console.log(data))  .catch(error => console.log(error));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

▍Axios

 axios  .post("https://jsonplaceholder.typicode.com/posts", {    title: "Title of post",    body: "Body of post"  })  .then(response => console.log(response.data))  .catch(error => console.log(error));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Using Axios avoids writing large amounts of boilerplate code and makes code cleaner and clearer.

Error processing

▍Fetch

 fetch("https://jsonplaceholder.typicode.com/todos/100000")  .then(response => {    if (!response.ok) throw Error(response.statusText);    return response.json();  })  .then(data => console.log("data", data))  .catch(error => {    console.log("error", error);  }); // error Error: Not Found
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

▍Axios

 axios  .get("https://jsonplaceholder.typicode.com/todos/100000")  .then(response => {    console.log("response", response);  })  .catch(error => {    console.log("error", error);  }); // error Error: Not Found
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

The Axios library reports network errors, but the Fetch API does not. When working with Fetch, you always need to check the response.ok



property. In order to simplify the solution of this problem, a check of this error can be issued as a separate function:

 const checkForError = response => {  if (!response.ok) throw Error(response.statusText);  return response.json(); }; fetch("https://jsonplaceholder.typicode.com/todos/100000")  .then(checkForError)  .then(data => console.log("data", data))  .catch(error => {    console.log("error", error);  });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Missing Features

Axios can monitor the progress of data upload. Fetch does not support this. This may be a decisive factor in choosing a technology for those who are developing an application that allows users to upload photos or video files to the server.

 const config = {  onUploadProgress: event => console.log(event.loaded) }; axios.put("/api", data, config);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Alternative libraries

Here are a couple of alternatives to Axios and the Fetch API:

• Ky is a miniature and smart HTTP client based on window.fetch
  
  
  
  .
• Superagent is a small progressive HTTP client library based on XMLHttpRequest
  
  
  
  .

Summary

What should i use in 2019? It depends on a lot. For example, if you need to track the progress of uploading materials to a server, then Axios or Superagent is best for you. If you can handle the limitations of Fetch, then you'd better use this API. And to improve the Fetch code a bit, try a wrapper library like Ky.



Dear readers! What HTTP clients do you use in your projects?