APIs & Browser

Fetch API

Modern way to make HTTP requests in JavaScript

Find videos you like?

Save to resource drawer for future reference!

What is the Fetch API?

The fetch() function is the modern, promise-based way to make HTTP requests. It replaces the older XMLHttpRequest with a cleaner, more powerful APIthat works seamlessly with async/await and provides better error handling.

Modern Standard!

Fetch is now the standard for HTTP requests in modern JavaScript. It's supported in all modern browsers and Node.js (18+).

Basic Fetch Syntax

Understanding the fundamental structure

Simple GET Request

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

How it works:

• fetch() returns a Promise
• First .then() receives the Response object
• .json() parses the response body as JSON (also returns a Promise)
• Second .then() receives the parsed data
• .catch() handles network errors

With Async/Await (Recommended)

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

Why async/await is better: More readable, easier error handling, and looks like synchronous code.

Understanding the Response Object

What fetch() returns and how to use it

The Response object contains information about the HTTP response:

Response Properties

response.ok - true if status 200-299
response.status - HTTP status code
response.statusText - status message
response.headers - Headers object
response.url - final URL

Response Methods

.json() - Parse JSON
.text() - Get as text
.blob() - Get as Blob (files)
.arrayBuffer() - Get as binary
.formData() - Parse form data

Checking Response Status

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();

Important: Fetch only rejects on network errors, not HTTP errors (404, 500, etc.). Always check response.ok!

Making Different Types of Requests

GET, POST, PUT, DELETE, etc.

POST Request with JSON Data

await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john@example.com'
  })
});

Key points:

• method specifies HTTP method
• headers sets Content-Type for JSON
• body must be a string (use JSON.stringify)

PUT/PATCH Request (Update)

await fetch('https://api.example.com/users/123', {
  method: 'PUT',  // or 'PATCH' for partial update
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Jane Doe' })
});

DELETE Request

await fetch('https://api.example.com/users/123', {
  method: 'DELETE'
});

Request Configuration Options

Customizing your requests

Option	Description	Example
`method`	HTTP method	`'GET', 'POST', 'PUT'`
`headers`	Request headers	`{'Authorization': 'Bearer ...'}`
`body`	Request payload	`JSON.stringify(data)`
`credentials`	Send cookies	`'include', 'same-origin'`
`mode`	CORS mode	`'cors', 'no-cors'`
`cache`	Cache mode	`'no-cache', 'reload'`
`signal`	Abort signal	`controller.signal`

Advanced Features

Aborting requests, timeouts, and authentication

Aborting Requests (AbortController)

const controller = new AbortController();

fetch('https://api.example.com/data', {
  signal: controller.signal
});

// Cancel the request
controller.abort();

Useful for canceling requests when user navigates away or when implementing request timeouts.

Request with Timeout

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

try {
  const response = await fetch(url, { signal: controller.signal });
  clearTimeout(timeoutId);
  return await response.json();
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Request timed out');
  }
}

Authentication with Headers

// Bearer token authentication
fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer your-token-here',
    'Content-Type': 'application/json'
  }
});

// Basic authentication
const credentials = btoa('username:password');
fetch('https://api.example.com/data', {
  headers: {
    'Authorization': `Basic ${credentials}`
  }
});

Error Handling Best Practices

Comprehensive Error Handling

async function fetchWithErrorHandling(url) {
  try {
    const response = await fetch(url);
    
    // Check HTTP status
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    
    // Parse JSON with error handling
    try {
      return await response.json();
    } catch (parseError) {
      throw new Error('Invalid JSON response');
    }
    
  } catch (error) {
    if (error.name === 'TypeError') {
      // Network error
      console.error('Network error:', error);
    } else if (error.name === 'AbortError') {
      // Request aborted
      console.error('Request aborted');
    } else {
      // Other errors
      console.error('Fetch error:', error.message);
    }
    throw error;
  }
}

Common Pitfalls

1. Not checking response.ok - 404 and 500 errors won't trigger catch

2. Forgetting await on .json() - It returns a Promise!

3. Not handling JSON parse errors - Response might not be JSON

4. CORS issues - Server must allow cross-origin requests

Complete Example: Fetching User Data

Real-world example with loading states and error handling

JavaScript Code

async/await

async function loadUserDashboard(userId) {
  const dashboardDiv = document.getElementById('dashboard');
  
  // Show loading state
  dashboardDiv.innerHTML = '<p>Loading...</p>';
  
  try {
    // Fetch user data
    const response = await fetch(
      `https://api.example.com/users/${userId}`
    );
    
    if (!response.ok) {
      throw new Error(`User not found: ${response.status}`);
    }
    
    const user = await response.json();
    
    // Display user data
    dashboardDiv.innerHTML = `
      <div class="user-card">
        <h2>${user.name}</h2>
        <p>Email: ${user.email}</p>
        <p>Joined: ${new Date(user.joinedDate)
          .toLocaleDateString()}</p>
      </div>
    `;
    
  } catch (error) {
    // Display error message
    dashboardDiv.innerHTML = `
      <div class="error">
        <p>Failed to load user data: ${error.message}</p>
        <button onclick="loadUserDashboard(${userId})">
          Retry
        </button>
      </div>
    `;
  }
}

// Call the function
loadUserDashboard(123);

Expected Output

Success

John Doe

Email: john.doe@example.com

Joined: 12/1/2024

💡 Loading state: "Loading..."

❌ Error state (if API fails):

"Failed to load user data: User not found: 404"

What This Shows

✅ Loading states

✅ Success rendering

✅ Error handling

Key Takeaways

Promise-Based

Returns promises, works with async/await

Check response.ok

Always verify HTTP status codes

Response Methods

.json(), .text(), .blob() for different formats

Abortable

Cancel requests with AbortController

Previous Topic

Performance Optimization

Profiling, monitoring, and optimizing JavaScript performance.

Next Topic

AJAX & XMLHttpRequest

Making asynchronous requests to servers.

Ask a Question

Have a question about Fetch API? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

APIs & Browser

Fetch API

Modern way to make HTTP requests in JavaScript

Find videos you like?

Save to resource drawer for future reference!

What is the Fetch API?

Modern Standard!

Fetch is now the standard for HTTP requests in modern JavaScript. It's supported in all modern browsers and Node.js (18+).

Basic Fetch Syntax

Understanding the fundamental structure

Simple GET Request

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

How it works:

• fetch() returns a Promise
• First .then() receives the Response object
• .json() parses the response body as JSON (also returns a Promise)
• Second .then() receives the parsed data
• .catch() handles network errors

With Async/Await (Recommended)

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

Why async/await is better: More readable, easier error handling, and looks like synchronous code.

Understanding the Response Object

What fetch() returns and how to use it

The Response object contains information about the HTTP response:

Response Properties

response.ok - true if status 200-299
response.status - HTTP status code
response.statusText - status message
response.headers - Headers object
response.url - final URL

Response Methods

.json() - Parse JSON
.text() - Get as text
.blob() - Get as Blob (files)
.arrayBuffer() - Get as binary
.formData() - Parse form data

Checking Response Status

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();

Important: Fetch only rejects on network errors, not HTTP errors (404, 500, etc.). Always check response.ok!

Making Different Types of Requests

GET, POST, PUT, DELETE, etc.

POST Request with JSON Data

await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john@example.com'
  })
});

Key points:

• method specifies HTTP method
• headers sets Content-Type for JSON
• body must be a string (use JSON.stringify)

PUT/PATCH Request (Update)

await fetch('https://api.example.com/users/123', {
  method: 'PUT',  // or 'PATCH' for partial update
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Jane Doe' })
});

DELETE Request

await fetch('https://api.example.com/users/123', {
  method: 'DELETE'
});

Request Configuration Options

Customizing your requests

Option	Description	Example
`method`	HTTP method	`'GET', 'POST', 'PUT'`
`headers`	Request headers	`{'Authorization': 'Bearer ...'}`
`body`	Request payload	`JSON.stringify(data)`
`credentials`	Send cookies	`'include', 'same-origin'`
`mode`	CORS mode	`'cors', 'no-cors'`
`cache`	Cache mode	`'no-cache', 'reload'`
`signal`	Abort signal	`controller.signal`

Advanced Features

Aborting requests, timeouts, and authentication

Aborting Requests (AbortController)

const controller = new AbortController();

fetch('https://api.example.com/data', {
  signal: controller.signal
});

// Cancel the request
controller.abort();

Useful for canceling requests when user navigates away or when implementing request timeouts.

Request with Timeout

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

try {
  const response = await fetch(url, { signal: controller.signal });
  clearTimeout(timeoutId);
  return await response.json();
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Request timed out');
  }
}

Authentication with Headers

// Bearer token authentication
fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer your-token-here',
    'Content-Type': 'application/json'
  }
});

// Basic authentication
const credentials = btoa('username:password');
fetch('https://api.example.com/data', {
  headers: {
    'Authorization': `Basic ${credentials}`
  }
});

Error Handling Best Practices

Comprehensive Error Handling

async function fetchWithErrorHandling(url) {
  try {
    const response = await fetch(url);
    
    // Check HTTP status
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    
    // Parse JSON with error handling
    try {
      return await response.json();
    } catch (parseError) {
      throw new Error('Invalid JSON response');
    }
    
  } catch (error) {
    if (error.name === 'TypeError') {
      // Network error
      console.error('Network error:', error);
    } else if (error.name === 'AbortError') {
      // Request aborted
      console.error('Request aborted');
    } else {
      // Other errors
      console.error('Fetch error:', error.message);
    }
    throw error;
  }
}

Common Pitfalls

1. Not checking response.ok - 404 and 500 errors won't trigger catch

2. Forgetting await on .json() - It returns a Promise!

3. Not handling JSON parse errors - Response might not be JSON

4. CORS issues - Server must allow cross-origin requests

Complete Example: Fetching User Data

Real-world example with loading states and error handling

JavaScript Code

async/await

async function loadUserDashboard(userId) {
  const dashboardDiv = document.getElementById('dashboard');
  
  // Show loading state
  dashboardDiv.innerHTML = '<p>Loading...</p>';
  
  try {
    // Fetch user data
    const response = await fetch(
      `https://api.example.com/users/${userId}`
    );
    
    if (!response.ok) {
      throw new Error(`User not found: ${response.status}`);
    }
    
    const user = await response.json();
    
    // Display user data
    dashboardDiv.innerHTML = `
      <div class="user-card">
        <h2>${user.name}</h2>
        <p>Email: ${user.email}</p>
        <p>Joined: ${new Date(user.joinedDate)
          .toLocaleDateString()}</p>
      </div>
    `;
    
  } catch (error) {
    // Display error message
    dashboardDiv.innerHTML = `
      <div class="error">
        <p>Failed to load user data: ${error.message}</p>
        <button onclick="loadUserDashboard(${userId})">
          Retry
        </button>
      </div>
    `;
  }
}

// Call the function
loadUserDashboard(123);

Expected Output

Success

John Doe

Email: john.doe@example.com

Joined: 12/1/2024

💡 Loading state: "Loading..."

❌ Error state (if API fails):

"Failed to load user data: User not found: 404"

What This Shows

✅ Loading states

✅ Success rendering

✅ Error handling

Key Takeaways

Promise-Based

Returns promises, works with async/await

Check response.ok

Always verify HTTP status codes

Response Methods

.json(), .text(), .blob() for different formats

Abortable

Cancel requests with AbortController

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Performance Optimization

AJAX & XMLHttpRequest

JavaScript Code Editor

Building Your Learning Module...

Fetch API

What is the Fetch API?

Modern Standard!

Simple GET Request

With Async/Await (Recommended)

Response Properties

Response Methods

Checking Response Status

POST Request with JSON Data

PUT/PATCH Request (Update)

DELETE Request

Aborting Requests (AbortController)

Request with Timeout

Authentication with Headers

Comprehensive Error Handling

Common Pitfalls

JavaScript Code

Expected Output

John Doe

What This Shows

Key Takeaways

Promise-Based

Check response.ok

Response Methods

Abortable

Performance Optimization

AJAX & XMLHttpRequest

JavaScript Code Editor

Fetch API

What is the Fetch API?

Modern Standard!

Simple GET Request

With Async/Await (Recommended)

Response Properties

Response Methods

Checking Response Status

POST Request with JSON Data

PUT/PATCH Request (Update)

DELETE Request

Aborting Requests (AbortController)

Request with Timeout

Authentication with Headers

Comprehensive Error Handling

Common Pitfalls

JavaScript Code

Expected Output

John Doe

What This Shows

Key Takeaways

Promise-Based

Check response.ok

Response Methods

Abortable