JavaScript Fetch API

What is Fetch?

Fetch is a modern way to make HTTP requests. Get data from servers.

┌─────────────────────┐
│   Your JavaScript   │
│   ┌───────────────┐ │
│   │ fetch(url)    │ │
│   └───────────────┘ │
└──────────┬──────────┘
            │
┌───────────▼───────────┐
│   Server              │
│   (API endpoint)      │
└──────────┬─────────────┘
            │
┌───────────▼───────────┐
│   Response             │
│   (JSON data)          │
└───────────────────────┘

GET Request

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

POST Request

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John',
    email: 'john@example.com'
  })
})
.then(response => response.json())
.then(data => console.log(data));

With async/await

async function getUsers() {
  try {
    const response = await fetch('https://api.example.com/users');
    const users = await response.json();
    return users;
  } catch (error) {
    console.error('Error:', error);
  }
}

Key Takeaway

Fetch makes HTTP requests. Returns a Promise. Use then() or async/await. Essential for getting data from APIs.