Making HTTP requests is a fundamental part of web development. Whether you're fetching data, submitting a form, updating content, or deleting a resource — the Fetch API makes it clean and modern.

In this blog, we'll walk through how to use the Fetch API to make GET, POST, PUT, PATCH, and DELETE requests — with real-world examples.

🔍 What is the Fetch API?

The Fetch API provides a simple and native way to make HTTP requests in the browser. It returns Promises and works with async/await.

✅ It’s built into all modern browsers — no need for extra libraries like Axios.

📦 Basic Syntax 

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Or using async/await:

const response = await fetch(url, options);
const data = await response.json();

✅ 1. GET Request (Fetch Data) 

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error fetching data:', error));

✅ With async/await 

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

fetchPosts();

📝 2. POST Request (Create Data) 

const createPost = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        title: 'New Post',
        body: 'This is the body of the new post.',
        userId: 1
      })
    });

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

createPost();

🔄 3. PUT Request (Update Entire Resource) 

const updatePost = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: 1,
        title: 'Updated Post',
        body: 'This post has been updated.',
        userId: 1,
      }),
    });

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

updatePost();

🩹 4. PATCH Request (Partial Update) 

const patchPost = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        title: 'Partially Updated Title',
      }),
    });

    const data = await response.json();
    console.log('Partially Updated Post:', data);
  } catch (error) {
    console.error('Error patching post:', error);
  }
};

patchPost();

❌ 5. DELETE Request (Remove Data) 

const deletePost = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'DELETE',
    });

    if (response.ok) {
      console.log('Post deleted successfully.');
    } else {
      console.error('Failed to delete post. Status:', response.status);
    }
  } catch (error) {
    console.error('Error deleting post:', error);
  }
};

deletePost();

🧠 Pro Tip: Handle HTTP Errors Manually

The Fetch API does not throw an error for HTTP error status codes (e.g., 404 or 500). You need to check response.ok yourself.

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch failed:', error);
  }
};

📋 Summary Table

HTTP Method Description Example Use Case
GET Read data Fetch list of blog posts
POST Create new data Submit a new post
PUT Replace entire resource Update all fields of a post
PATCH Update part of resource Modify title or description
DELETE Remove data Delete a post by ID

⚔️ Fetch API vs Axios (Quick Glance)

Feature Fetch API Axios
Native Support ✅ ❌
Automatic JSON ❌ ✅
Interceptors ❌ ✅
Timeout ❌ ✅
Response Errors Manual Automatic
Lightweight ✅ ❌ (external dependency)

🎁 Bonus: Fetch Wrapper for Reusability 

const fetchJson = async (url, options = {}) => {
  const response = await fetch(url, options);
  if (!response.ok) throw new Error(`Error: ${response.status}`);
  return await response.json();
};

🧩 Conclusion

The Fetch API is a modern, native way to interact with HTTP resources — whether it's creating, reading, updating, or deleting data.

✅ Use Fetch for:

  • Lightweight and browser-native HTTP calls
  • Simple use cases where you don’t need interceptors or advanced features

❗ Use Axios if you:

  • Need advanced features like interceptors, request cancellation, or automatic transformation