Axios Vs Fetch: Which Should You Use For Your HTTP Requests?
Tags: javascript, programming, tutorial, react
Published: 2024-07-09 11:34:35

For most developers, fetching data is essential for modern applications to interact with APIs coming from the backend. and to achieve that we have several options the most popular ones are `AXIOS` and `FETCH`. while both have the same basic functions, at the same time they offer different features and developer experience. This article will dive deeper into the difference between both technologies, helping you decide which best suits your needs.

## **Why do we need HTTP request tools?**

HTTP request tools are important for handling complex responses, especially handling errors and parsing responses, tools like `Axios` and `Fetch` simplify these tasks by providing some features such as:

- Error Handling
- Cross-browser Compatibility
- Handling Asynchronous Operations
- Simplifying Network Requests
- Developer-Experience

**Fetch API:** The fetch API is a built-in browser and javascript method for making HTTP requests. It is a more powerful and flexible replacement for XMLHttpRequest.

**Fetch API Usage**

```
fetch(URL)
  .then(response=>{
      //Handle response
  })
  .catch(error=>{
      //Handle error
  })
```

**Axios:** Axios is a popular third-party library for making HTTP requests. It makes managing and manipulating requests easier.

**Axios installation**

```
$ npm install axios
```

**Axios usage**

```
import axios from 'axios';

axios.get('https://api.example.com/data') 
  .then(response => { console.log(response.data) }) 
  .catch(error => { console.error('Error:', error) }); 
```

## **Key differences**

**Handling JSON**

**Fetch:** Requires manual conversion of response data to JSON

```
fetch('https://api.example.com/data')
  .then(response => response.json()) // Manual conversion
  .then(data => console.log(data));
```

**Axios:** Automaticlly parses JSON responses

```
axios.get('https://api.example.com/data')
  .then(response => console.log(response.data)); // Automatic conversion
```

**Handling error**

**Fetch:** Reject only a network error promise, not an HTTP error  (e.g., 404 or 500 status codes).

```
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .catch(error => console.error('Fetch error:', error));
```

**Axios:** Rejects a promise for both network errors and HTTP errors.

```
axios.get('https://api.example.com/data')
  .catch(error => console.error('Axios error:', error));
```

**Request Configuration**

**Fetch:** Requires manual configuration of options like headers and method

```
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});
```

**Axios:** Provides a more concise and readable syntax for configuration.

```
axios.post('https://api.example.com/data', { key: 'value' }, {
  headers: {
    'Content-Type': 'application/json'
  }
});
```

## **Conclusion**

both Axios and Fetch are excellent for fetching data in Javascript, they offer lots of features, ease of use, and reliable performance, but you need to consider these 3 things before using one of them:

**Use Fetch when:**

- you prefer using a built-in API without additional dependencies
- your project needs to stay lightweight
- you are comfortable handling JSON transformation and error checking manually

**Use Axios when:**

- It would be best to go with a cleaner syntax and more readable code.
- You want built-in support for request and response interceptors, timeout, and cancellation.
- You prefer automatic JSON transformation and simpler error handling.

by knowing these factors, you are ready to make a decision that fits your project’s requirements and your developer experience