Using Axios with React to make GET, POST, and DELETE API Requests

In today's world of modern web development, React has become a popular choice for creating interactive and scalable user interfaces. As a developer, you often need to work with APIs to fetch and manipulate data within your React applications. Axios is a powerful and flexible HTTP client library that can be used to make API requests in a simple and efficient way. In this blog post, we will explore how to use Axios with React to make GET, POST, and DELETE API requests.

What is Axios?

Axios is a promise-based HTTP client for making requests to APIs in both browser and Node.js environments. It is designed to be lightweight, easy to use, and supports many advanced features such as interceptors, request and response transformations, and error handling. You can learn more about Axios from its official documentation.

Getting Started with Axios and React

To start using Axios with React, you first need to install the Axios package. You can do this using npm or yarn:

npm install axios

or

yarn add axios

After installing Axios, you can import it into your React components and start using it to make API requests.

Making a GET Request with Axios and React

Let's create a simple React component that fetches data from a public API using Axios and displays the results. We'll use the JSONPlaceholder API to fetch some sample data.

First, create a new functional component called GetData:

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

const GetData = () => {
  // State to store the fetched data
  const [data, setData] = useState([]);

  // Function to fetch data using Axios
  const fetchData = async () => {
    try {
      const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
      setData(response.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  // Call fetchData on component mount
  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      <h2>Posts:</h2>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default GetData;

In this example, we've created a fetchData function that uses Axios to make a GET request to the JSONPlaceholder API. The fetched data is then stored in the data state variable, which is initially set to an empty array. The fetchData function is called when the component mounts using the useEffect hook.

Making a POST Request with Axios and React

Now let's create a form to add a new post and send it to the server using Axios. We'll create a new functional component called AddPost:

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

const AddPost = () => {
  // State to store the form data
  const [formData, setFormData] = useState({
    title: "",
    body: "",
  });

  // Function to handle form input changes
  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  // Function to submit the form data using Axios
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post("https://jsonplaceholder.typicode.com/posts", formData);
      console.log("Post created:", response.data);
    } catch (error) {
      console.error("Error creating post:", error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Title:
        <input type="text" name="title" value={formData.title} onChange={handleChange} />
      </label>
      <br />
      <label>
        Body:
        <textarea name="body" value={formData.body} onChange={handleChange}></textarea>
      </label>
      <br />
      <button type="submit">Add Post</button>
    </form>
  );
};

export default AddPost;

In this example, we've created a form with two inputs for the post's title and body. The form data is stored in the formData state variable, which is initially set to an object with empty strings for both fields. The handleChange function is used to update the formData state when the user types in the inputs.

The handleSubmit function is called when the form is submitted. This function uses Axios to make a POST request to the JSONPlaceholder API with the form data as the request body.

Making a DELETE Request with Axios and React

Finally, let's add a button to delete a post using Axios. We'll modify the GetData component to include a deletePost function:

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

const GetData = () => {
  // State to store the fetched data
  const [data, setData] = useState([]);

  // Function to fetch data using Axios
  const fetchData = async () => {
    // ... (same as before)
  };

  // Function to delete a post using Axios
  const deletePost = async (id) => {
    try {
      await axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);
      console.log("Post deleted:", id);
      setData(data.filter((post) => post.id !== id));
    } catch (error) {
      console.error("Error deleting post:", error);
    }
  };

  // Call fetchData on component mount
  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      <h2>Posts:</h2>
      <ul>
        {data.map((post) => (
          <li key={post.id}>
            {post.title}{" "}
            <button onClick={() => deletePost(post.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default GetData;

The deletePost function takes an id parameter and uses Axios to make a DELETE request to the JSONPlaceholder API. After the post is successfully deleted, we update the data state by filtering out the deleted post based on its id.

Comparing Axios with Native Fetch

It's worth mentioning that Axios is not the only solution for making API requests in React. The native Fetch API is also a popular choice for making HTTP requests in modern web applications. While Axios offers some additional features like request and response interceptors, automatic JSON data transformation, and wider browser support, the Fetch API is built-in to modern browsers and may be sufficient for simple use cases.

However, the choice between Axios and Fetch ultimately depends on your specific requirements, preferences, and familiarity with the libraries.

FAQ

Q: Can I use Axios with React class components?
A: Yes, you can use Axios with React class components. You can call Axios inside the componentDidMount lifecycle method for fetching data when the component mounts or use the Axios inside event handlers for POST and DELETE requests.

Q: Can I use Axios to make requests to different APIs in the same component?
A: Yes, you can use Axios to make requests to multiple APIs within the same component. Just create separate functions for each API call and use them as needed.

Q: Can I use Axios with other JavaScript frameworks or libraries?
A: Yes, Axios is a standalone HTTP client library and can be used with any JavaScript framework or library, or even in plain JavaScript projects.

Q: Can I use Axios to make requests to APIs that require authentication?
A: Yes, you can use Axios to make requests to APIs that require authentication. You can set the required authentication headers (e.g., Authorization) in the Axios request configuration.

We hope this blog post has provided you with a solid understanding of how to use Axios with React to make GET, POST, and DELETE API requests. With these skills, you can now build more complex and interactive React applications that interact with various APIs. Happy coding!