Axios in React

While the Fetch API is built into browsers, many developers prefer using **Axios**, a third-party library that provides a more powerful and easier-to-use interface for making HTTP requests. Axios automatically transforms JSON data, has better error handling, and works in both browser and Node.js environments.

What is Axios?

Axios is a promise-based HTTP client that works in the browser and Node.js. It provides a simple API for making requests and handles many tasks automatically, like converting responses to JSON.

Think of Axios as a more feature-rich cousin of Fetch. It does more work for you, so you write less code.

Installation

npm install axios

Basic GET Request with Axios

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

function PostList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setPosts(response.data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading posts...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {posts.slice(0, 5).map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

POST Request with Axios

const createPost = async (newPost) => {
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
    console.log('Post created:', response.data);
  } catch (error) {
    console.error('Error creating post:', error);
  }
};

Axios vs Fetch

Feature	Fetch	Axios
JSON transformation	Manual (response.json())	Automatic
Error handling	Only network errors, not HTTP errors	All errors (network and HTTP)
Request timeout	Not built-in	Built-in
Browser support	Modern browsers only	Older browsers supported

Two Minute Drill

Axios is a popular third-party library for making HTTP requests in React.

It automatically transforms responses to JSON and provides better error handling than Fetch.

Install with `npm install axios` and import it into your components.

Use `axios.get()`, `axios.post()`, etc., for different HTTP methods.

Axios is promise-based, so you can use `.then()`/`.catch()` or `async/await`.

Practice Exercises Interview Questions Take Quiz

Need more clarification?

Drop us an email at career@quipoinfotech.com

Welcome to Quipoin

Quipoin Menu

Axios in React

Need more clarification?