⚡ Mastering Axios in JavaScript — GET, POST, PUT, PATCH, DELETE (With Examples)

Using Fetch Link
Making API calls is one of the most common tasks in web development. While the Fetch API is native to browsers, Axios is a popular and powerful alternative with advanced features, clean syntax, and better defaults.

In this blog, we’ll learn how to use Axios for:

✅ GET – Fetch data

✅ POST – Send data

✅ PUT – Update entire data

✅ PATCH – Update partial data

✅ DELETE – Remove data

Let’s dive in! 🏊

🔧 What is Axios?

Axios is a lightweight HTTP client library based on promises. It works in both browser and Node.js, and it automatically transforms JSON data, handles errors better than fetch, and supports advanced features like interceptors and timeouts.

To install:

npm install axios

Or use CDN:

<span class="na">src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">

✅ 1. GET Request (Fetch Data)

import axios from 'axios';

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

✅ With async/await

const fetchPosts = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error('Error:', error);
  }
};

fetchPosts();

📝 2. POST Request (Create Data)

const createPost = async () => {
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: 'New Post',
      body: 'This is the body of the new post.',
      userId: 1,
    });

    console.log('Created Post:', response.data);
  } catch (error) {
    console.error('Error creating post:', error);
  }
};

createPost();

✏️ 3. PUT Request (Replace Entire Resource)

const updatePost = async () => {
  try {
    const response = await axios.put('https://jsonplaceholder.typicode.com/posts/1', {
      id: 1,
      title: 'Updated Title',
      body: 'This is the updated post body.',
      userId: 1,
    });

    console.log('Updated Post:', response.data);
  } catch (error) {
    console.error('Error updating post:', error);
  }
};

updatePost();

🩹 4. PATCH Request (Partial Update)

const patchPost = async () => {
  try {
    const response = await axios.patch('https://jsonplaceholder.typicode.com/posts/1', {
      title: 'Partially Updated Title',
    });

    console.log('Patched Post:', response.data);
  } catch (error) {
    console.error('Error patching post:', error);
  }
};

patchPost();

❌ 5. DELETE Request (Remove Data)

const deletePost = async () => {
  try {
    const response = await axios.delete('https://jsonplaceholder.typicode.com/posts/1');
    console.log('Deleted Post Response:', response.status);
  } catch (error) {
    console.error('Error deleting post:', error);
  }
};

deletePost();

🧠 Axios Features That Shine

Feature	Description
Auto JSON Handling	Automatically converts JSON responses and requests
Timeout Support	Easily add request timeouts
Interceptors	Modify requests/responses globally
HTTP Errors	Axios throws for all HTTP status errors (not just network)
Node.js Compatible	Use in both browser and server-side apps

🧩 Reusable Axios Helper

Create a reusable instance for cleaner code:

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 5000
});

export default api;

Use it like this:

const getPosts = async () => {
  const response = await api.get('/posts');
  console.log(response.data);
};

⚔️ Axios vs Fetch: Which One Should You Use?

Feature	Fetch API	Axios
Native Support	✅	❌ (external lib)
Auto JSON Parsing	❌	✅
Interceptors	❌	✅
Timeout	❌ (needs Abort)	✅
Error Handling	❌ (manual)	✅ (automatic)
Upload Progress	❌	✅

💡 If you're building a large-scale application — go with Axios.

For small or native browser apps — Fetch might be enough.

🏁 Final Thoughts

Both Fetch API and Axios are excellent tools for HTTP requests. But Axios provides:

✅ Cleaner syntax

✅ More features

✅ Better error handling

✅ Built-in JSON support

✅ Interceptors and Timeouts

Use Axios when:

You need advanced features
You’re building something big
You prefer clean, readable code