CRUD Operations with Axios in React

What is Axios?

Axios is a promise-based HTTP client for the browser and Node.js. It is a library that helps in making HTTP requests to external resources. It is a promise-based library that can be used in both client-side and server-side applications.

Why Axios over Fetch API?

Some of the reasons why Axios is preferred over Fetch API are:

Easier syntax and cleaner code
Better Build-in error handling
Better support for older browsers
Automatic transformation of JSON data

Installation

To use Axios in your React project, you need to install it using npm or yarn. You can install Axios by running the following command:

npm install axios

Simple Data Fetching using Fetch API

import React, { useState, useEffect } from 'react';

const App = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(()=>{
        async function fetchData(){
            try{
                const response = await fetch('https://jsonplaceholder.typicode.com/posts');
                const data = await response.json();
                if(!response.ok){
                    throw new Error('Failed to fetch data');
                }
                setData(data);
                setLoading(false);
            }catch(error){
                setError(error);
                setLoading(false);
            }
        }
    })
    return (
        <div>
            {loading ? <p>Loading...</p> : error ? <p>{error.message}</p> : data.map(post => <p key={post.id}>{post.title}</p>)}
        </div>
    )
}
export default App;

The main defect of this code are:

It is not supported in older browsers
It does not have built-in error handling as we have to check the response.ok property to check if the request was successful or not.
It does not automatically transform JSON data as we have to call response.json() to parse the JSON data.

Simple Data Fetching using Axios

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(()=>{
        async function fetchData(){
            try{
                const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
                setData(response.data);
                setLoading(false);
            }catch(error){
                setError(error);
                setLoading(false);
                //error.message
                //error.response
                //error.response.status
            }
        }
    })
    return (
        <div>
            {loading ? <p>Loading...</p> : error ? <p>{error.message}</p> : data.map(post => <p key={post.id}>{post.title}</p>)}
        </div>
    )

}
export default App;

It is a better way to fetch data from an API as it has built-in error handling and automatically transforms JSON data.

Proper Ways of structuring Axios requests

We can put all the axios code in same file but it is not a good practice. We should create a separate file for axios requests and then import it in the component where we want to use it.

Creating a separate file for Axios requests

src
├── api
│   └── getData.js
└── components
    └── App.js

getData.js

import axios from 'axios';

const api=axios.create({
    baseURL:'https://jsonplaceholder.typicode.com'
});

export const getData=()=>{
    return api.get('/posts')
};

App.js

import React, { useState, useEffect } from 'react';
import { getData } from '../api/getData';

const App = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
     async function fetchData(){
            try{
                const response = await getData();
                setData(response.data);
                setLoading(false);
            }catch(error){
                setError(error);
                setLoading(false);
            }
        }

    useEffect(()=>{
        fetchData();
    },[]);

    return (
        <div>
            {loading ? <p>Loading...</p> : error ? <p>{error.message}</p> : data.map(post => <p key={post.id}>{post.title}</p>)}
        </div>
    )
}
export default App;