How To Use React With Axios For Efficient Data Fetching

With Code Example — Tue, 09 Apr 2024 16:47:55 +0000

Hello, Welcome to my blog. In this React JS tutorial, we will learn what is axios. how we can use it with react Js to make API calls with the backend. Then we will see the examples to perform the GET, POST, PUT and DELETE requests with code examples.

What is Axios

Axios is a promise-based HTTP client library that is used to make API calls in the React JS application. With Axios you can perform all kinds of rest API request calls such as get, post, put and delete. It provides a cleaner and more intuitive way to fetch API for tasks like:

Fetching data from the server
Sending data to servers
Handling responses

Install Axios

We can use npm or yarn to install the Axios to our react app:

# using NPM
npm install axios

# using yarn
yarn add axios

Making GET request with Axios

Get HTTP request is used to retrieve the data from the server, Axios provides a simple way to perform the HTTP GET operation.

Axios HTTP GET example

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setData(response.data);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>HTTP GET Example using Axios in React</h1>
      {loading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>Error: {error.message}</p>
      ) : (
        <div>
          <h2>Data:</h2>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}
export default App;

Making POST request with Axios

HTTP POST request is used to send the data to server, Axios provides a simple way to perform the HTTP POST operation.

Axios HTTP POST example

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

function App() {
  const [formData, setFormData] = useState({
    title: '',
    body: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('https://jsonplaceholder.typicode.com/posts', formData);
      console.log('Response:', response.data);
      setFormData({
        title: '',
        body: ''
      });
      alert('Post submitted successfully!');
    } catch (error) {
      console.error('Error submitting post:', error);
      alert('An error occurred while submitting the post. Please try again later.');
    }
  };

  return (
    <div>
      <h1>HTTP POST Example using Axios in React</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Title:</label>
          <input
            type="text"
            name="title"
            value={formData.title}
            onChange={handleChange}
            required
          />
        </div>
        <div>
          <label>Body:</label>
          <textarea
            name="body"
            value={formData.body}
            onChange={handleChange}
            required
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

Making PUT request with Axios

The PUT request is an HTTP request method for creating a new element or replacing the representation of an existing item with the request payload.

Axios HTTP PUT example

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

function App() {
  const [updatedData, setUpdatedData] = useState({
    id: 1,
    title: 'Updated Title',
    body: 'Updated Body'
  });

  const [responseData, setResponseData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const updateData = async () => {
      try {
        const response = await axios.put('https://jsonplaceholder.typicode.com/posts/1', updatedData);
        setResponseData(response.data);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    updateData();
  }, [updatedData]);

  return (
    <div>
      <h1>HTTP PUT Example using Axios in React</h1>
      {loading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>Error: {error.message}</p>
      ) : (
        <div>
          <h2>Response Data:</h2>
          <pre>{JSON.stringify(responseData, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}
export default App;

Making DELETE request with Axios

HTTP DELETE request is used to remove the data, Axios provides a simple way to perform the HTTP DELETE operation.

Axios HTTP DELETE example

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
  const [responseData, setResponseData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const deleteData = async () => {
      try {
        const response = await axios.delete('https://jsonplaceholder.typicode.com/posts/1');
        setResponseData(response.data);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    deleteData();
  }, []);

  return (
    <div>
      <h1>HTTP DELETE Example using Axios in React</h1>
      {loading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>Error: {error.message}</p>
      ) : (
        <div>
          <h2>Response Data:</h2>
          <pre>{JSON.stringify(responseData, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}
export default App;

Thank you for reading our blog! We hope it was helpful and interesting. If you found something useful in what you read, we would be very happy if you could spread this information on social media. This way, we enlarge our reader’s base and disseminate valuable knowledge to a larger population. Thank you again for your support!

DEV Community: With Code Example