Fetch API Usage

🔄 Fetch API – Modern Way to Make HTTP Requests in JavaScript

The Fetch API is a built-in browser interface that lets you make network requests (like GET, POST, PUT, DELETE) in a clean, promise-based way.

🧠 It’s a replacement for XMLHttpRequest, and is now the standard for fetching data in modern web apps.

🔹 Basic Syntax

📘 GET Request Example

✅ Default method is GET
✅ Parses response as JSON

📝 POST Request Example

⚙️ Common Options in `fetch()`

Option	Use
`method`	`'GET'`, `'POST'`, `'PUT'`, `'DELETE'`, etc.
`headers`	Add custom request headers
`body`	Send data (for POST/PUT), usually as JSON
`credentials`	`'include'` to send cookies
`mode`	`'cors'`, `'no-cors'`, `'same-origin'`

🧠 Handling Response

🔒 With Authentication (Token)

🕒 Async/Await Version

🌍 CORS & Credentials

To send cookies or HTTP auth:

For CORS requests, your backend must handle proper headers:

✅ Summary

Feature	Description
Promise-based	Cleaner than XHR
Built-in	No libraries needed
Supports async/await	✅
Handles all HTTP verbs	✅
Used for APIs & RESTful calls	✅

📚 Bonus Resources

Here are three options based on what you might want to build with the Fetch API. You can pick any or all of them:

✅ 1. 🔁 Reusable Fetch Wrapper Function

A utility to simplify repeated fetch requests:

// utils/fetchHelper.js

export async function fetchAPI(url, method = 'GET', data = null, token = '') {

  const options = {

    method,

    headers: {

      'Content-Type': 'application/json',

      ...(token && { Authorization: `Bearer ${token}` }),

    },

    ...(data && { body: JSON.stringify(data) }),

  };

try {
const res = await fetch(url, options);
if (!res.ok) throw new Error(`Error: ${res.status}`);
return await res.json();
} catch (err) {
console.error(‘Fetch error:’, err);
throw err;
}
}

Usage:

✅ 2. ⚛️ React App Example Using `fetch()`

✅ Ideal for React beginners
✅ Can be extended with loading/spinner, error states

✅ 3. 📦 Real-World CRUD Example (HTML + Fetch + Backend)

HTML

JS

const form = document.getElementById('postForm');

const output = document.getElementById('output');

form.addEventListener(‘submit’, async (e) => {
e.preventDefault();
const title = form.title.value;
const body = form.body.value;

const res = await fetch(‘https://jsonplaceholder.typicode.com/posts’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({ title, body }),
});