Fetch API

What is the Fetch API?

The Fetch API provides a modern way to make HTTP requests in JavaScript. It's built on Promises and replaces older methods like XMLHttpRequest.

Basic GET Request

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

With Async/Await

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('Network response was not ok');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

POST Request

const response = await fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Alice', age: 25 })
});

Handling Different Response Types

• response.json() — parse as JSON
• response.text() — parse as text
• response.blob() — parse as Blob (for images)
• response.formData() — parse as FormData

Common Mistakes

• Forgetting to check response.ok before parsing
• Not handling errors with .catch() or try/catch
• Using fetch() without await or .then()
• Forgetting to set Content-Type header for POST requests

Quick Quiz

Summary

• fetch() makes HTTP requests and returns a Promise
• Always check response.ok for success
• Use response.json() to parse JSON responses
• Configure requests with method, headers, and body
• Always handle errors with .catch() or try/catch
• Async/await makes fetch code more readable