Using Axios in React: Examples for GET and POST Requests

Axios is a promise-based HTTP client that simplifies making HTTP requests in React applications. It streamlines tasks like fetching data from APIs and sending data to servers. In this guide, we’ll explore how to use Axios in React with practical examples for GET and POST requests.

Setting Up Axios in React

To get started with Axios in your React project:

1. Install Axios:

   npm install axios
   

2. Import Axios in your component:

   import axios from 'axios';
   

Making GET Requests

A GET request retrieves data from a specified endpoint. Here’s how to perform a GET request using Axios in a React component:

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

function DataFetchingComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

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

export default DataFetchingComponent;

Explanation:

• State Initialization: useState initializes data as an empty array.
• Data Fetching: axios.get retrieves data from the API endpoint.
• Effect Hook: useEffect ensures the GET request runs once after the component mounts.
• Error Handling: Errors are caught and logged to the console.

Making POST Requests

A POST request sends data to a server to create a new resource. Here’s how to perform a POST request using Axios in a React component:

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

function CreatePostComponent() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const post = { title, body };
    axios.post('https://jsonplaceholder.typicode.com/posts', post)
      .then(response => {
        console.log('Post created:', response.data);
      })
      .catch(error => {
        console.error('Error creating post:', error);
      });
  };

  return (
    <div>
      <h1>Create Post</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Title:</label>
          <input
            type=""text""
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </div>
        <div>
          <label>Body:</label>
          <textarea
            value={body}
            onChange={(e) => setBody(e.target.value)}
          />
        </div>
        <button type=""submit"">Submit</button>
      </form>
    </div>
  );
}

export default CreatePostComponent;

Explanation:

• State Initialization: useState initializes title and body as empty strings.
• Form Handling: The form captures user input for the post’s title and body.
• Submit Function: handleSubmit prevents the default form submission behavior, constructs a post object, and sends it using axios.post.
• Error Handling: Errors are caught and logged to the console.

FAQs

Can Axios be used for other HTTP methods in React?

Yes, Axios supports various HTTP methods, including PUT, DELETE, and PATCH, allowing for a full range of CRUD operations.

Is Axios better than the Fetch API?

Axios offers a more straightforward API and handles JSON data automatically, which can simplify code compared to the native Fetch API.

How can I handle request cancellations with Axios in React?

Axios provides a way to cancel requests using the `CancelToken` API, which can be useful for preventing memory leaks in React applications.

Conclusion

Axios is a powerful tool for handling HTTP requests in React applications. By understanding how to perform GET and POST requests, you can efficiently interact with APIs and manage data within your React components.