Fetch API in JavaScript

The Fetch API provides a modern, promise-based way to make HTTP requests in the browser. It's more powerful and flexible than the older XMLHttpRequest.

🤔 What is Fetch API?

Fetch API is a modern interface for fetching resources across the network. It provides a more powerful and flexible feature set than XMLHttpRequest.

Promise-based - Uses Promises for async operations
Streaming responses - Handle large responses efficiently
Request/Response objects - Detailed control over HTTP calls
Built into browsers - No external libraries needed

💡 Key Features

Simple, cleaner syntax than XMLHttpRequest
Streaming and chunked responses
Service Worker integration
CORS and credentials control
AbortController for request cancellation

Browser Support

All modern browsers support Fetch API. For older browsers, use polyfills or fallback to XMLHttpRequest.

📝 Basic GET Request

The simplest use of Fetch API - making a GET request to retrieve data.

JavaScript Editor

Response Properties:

response.ok - True for status 200-299
response.status - HTTP status code
response.statusText - Status message
response.headers - Response headers
response.url - Final URL after redirects

📨 POST Request with JSON

Sending data to a server using POST method with JSON payload.

JavaScript Editor

Common Headers:

Content-Type - Type of data being sent
Authorization - Authentication tokens
Accept - What type of response you accept
User-Agent - Client information

🔄 All HTTP Methods

Fetch API supports all HTTP methods: GET, POST, PUT, PATCH, DELETE, etc.

JavaScript Editor

// Different HTTP methods
const API_URL = 'https://jsonplaceholder.typicode.com/posts/1';

// GET - Retrieve data
async function getPost() {
  const response = await fetch(API_URL);
  const data = await response.json();
  console.log('GET:', data);
}

// PUT - Update entire resource
async function updatePost() {
  const updatedData = {
    id: 1,
    title: 'Updated Title',
    body: 'Updated body content',
    userId: 1
  };
  
  const response = await fetch(API_URL, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(updatedData)
  });
  
  const data = await response.json();
  console.log('PUT:', data);
}

// PATCH - Partial update
async function patchPost() {
  const patchData = {
    title: 'Patched Title Only'
  };
  
  const response = await fetch(API_URL, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(patchData)
  });
  
  const data = await response.json();
  console.log('PATCH:', data);
}

// DELETE - Remove resource
async function deletePost() {
  const response = await fetch(API_URL, {
    method: 'DELETE'
  });
  
  console.log('DELETE status:', response.status);
  console.log('DELETE successful:', response.ok);
}

// Execute all methods
async function runAllMethods() {
  console.log('=== HTTP Methods Demo ===');
  await getPost();
  console.log('---');
  await updatePost();
  console.log('---');
  await patchPost();
  console.log('---');
  await deletePost();
}

runAllMethods();

HTTP Methods:

GET - Retrieve data
POST - Create new resource
PUT - Update entire resource
PATCH - Partial update
DELETE - Remove resource

When to Use:

Use POST for creating
Use PUT for full updates
Use PATCH for partial updates
Use DELETE for removal

🚨 Advanced Error Handling

Comprehensive error handling with retry logic and status code management.

JavaScript Editor

// Comprehensive error handling
async function fetchWithRetry(url, options = {}, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      console.log(`Attempt ${i + 1} of ${maxRetries}`);
      
      const response = await fetch(url, options);
      
      if (!response.ok) {
        // Handle different HTTP error statuses
        switch (response.status) {
          case 400:
            throw new Error('Bad Request - Check your parameters');
          case 401:
            throw new Error('Unauthorized - Check your authentication');
          case 403:
            throw new Error('Forbidden - You don't have permission');
          case 404:
            throw new Error('Not Found - Resource doesn't exist');
          case 500:
            throw new Error('Server Error - Try again later');
          default:
            throw new Error(`HTTP Error! Status: ${response.status}`);
        }
      }
      
      const data = await response.json();
      console.log('Success on attempt:', i + 1);
      return data;
      
    } catch (error) {
      console.warn(`Attempt ${i + 1} failed:`, error.message);
      
      // Don't retry on client errors (4xx)
      if (error.message.includes('400') || 
          error.message.includes('401') || 
          error.message.includes('403') || 
          error.message.includes('404')) {
        throw error;
      }
      
      // Wait before retrying (exponential backoff)
      if (i < maxRetries - 1) {
        const delay = 1000 * Math.pow(2, i); // 1s, 2s, 4s
        console.log(`Waiting ${delay}ms before retry...`);
        await new Promise(resolve => setTimeout(resolve, delay));
      }
    }
  }
  
  throw new Error(`Failed after ${maxRetries} attempts`);
}

// Test with error scenarios
async function testErrorHandling() {
  try {
    // Test 1: Successful request
    console.log('Test 1: Successful request');
    const data1 = await fetchWithRetry(
      'https://jsonplaceholder.typicode.com/posts/1'
    );
    console.log('Success:', data1.title);
    
    // Test 2: Non-existent endpoint (will fail immediately)
    console.log('\nTest 2: 404 Error');
    const data2 = await fetchWithRetry(
      'https://jsonplaceholder.typicode.com/nonexistent'
    );
    
  } catch (error) {
    console.error('Final error:', error.message);
  }
}

testErrorHandling();

HTTP Status Code Groups:

1xx - Informational
2xx - Success (200 OK, 201 Created)
3xx - Redirection
4xx - Client Errors (400 Bad Request, 404 Not Found)
5xx - Server Errors

🎯 Practical Example: GitHub API

Real-world example integrating with GitHub API to fetch user data and repositories.

JavaScript Editor

// Practical Example: GitHub API Integration
class GitHubAPI {
  constructor(username) {
    this.baseURL = 'https://api.github.com';
    this.username = username;
  }
  
  async getUserInfo() {
    try {
      const response = await fetch(`${this.baseURL}/users/${this.username}`);
      
      if (!response.ok) {
        if (response.status === 404) {
          throw new Error('User not found');
        }
        throw new Error(`GitHub API error: ${response.status}`);
      }
      
      return await response.json();
    } catch (error) {
      console.error('Error fetching user info:', error);
      throw error;
    }
  }
  
  async getRepositories(sort = 'updated', direction = 'desc') {
    try {
      const url = new URL(`${this.baseURL}/users/${this.username}/repos`);
      url.searchParams.append('sort', sort);
      url.searchParams.append('direction', direction);
      
      const response = await fetch(url);
      
      if (!response.ok) {
        throw new Error(`Failed to fetch repos: ${response.status}`);
      }
      
      return await response.json();
    } catch (error) {
      console.error('Error fetching repositories:', error);
      throw error;
    }
  }
  
  async getRepositoryDetails(repoName) {
    try {
      const response = await fetch(
        `${this.baseURL}/repos/${this.username}/${repoName}`
      );
      
      if (!response.ok) {
        throw new Error(`Failed to fetch repo details: ${response.status}`);
      }
      
      return await response.json();
    } catch (error) {
      console.error('Error fetching repository details:', error);
      throw error;
    }
  }
  
  async getAllUserData() {
    try {
      console.log(`Fetching data for user: ${this.username}`);
      
      // Fetch all data in parallel
      const [userInfo, repos] = await Promise.all([
        this.getUserInfo(),
        this.getRepositories()
      ]);
      
      // Get details for first 3 repositories
      const firstThreeRepos = repos.slice(0, 3);
      const repoDetails = await Promise.all(
        firstThreeRepos.map(repo => this.getRepositoryDetails(repo.name))
      );
      
      return {
        user: userInfo,
        repositories: {
          count: repos.length,
          list: repos.map(repo => ({
            name: repo.name,
            description: repo.description,
            stars: repo.stargazers_count,
            forks: repo.forks_count,
            language: repo.language
          }))
        },
        topRepositories: repoDetails
      };
      
    } catch (error) {
      console.error('Error fetching all user data:', error);
      throw error;
    }
  }
}

// Usage example
async function displayGitHubData() {
  const github = new GitHubAPI('octocat'); // GitHub's example user
  
  try {
    const userData = await github.getAllUserData();
    
    console.log('=== GitHub User Data ===');
    console.log(`Name: ${userData.user.name}`);
    console.log(`Bio: ${userData.user.bio}`);
    console.log(`Followers: ${userData.user.followers}`);
    console.log(`Following: ${userData.user.following}`);
    console.log(`Public Repos: ${userData.repositories.count}`);
    
    console.log('\n=== Top Repositories ===');
    userData.repositories.list.slice(0, 5).forEach((repo, index) => {
      console.log(`${index + 1}. ${repo.name}`);
      console.log(`   Description: ${repo.description || 'No description'}`);
      console.log(`   Language: ${repo.language || 'Not specified'}`);
      console.log(`   Stars: ${repo.stars}, Forks: ${repo.forks}`);
    });
    
    return userData;
    
  } catch (error) {
    console.error('Failed to display GitHub data:', error.message);
  }
}

// Run the example
displayGitHubData().then(data => {
  console.log('\n✅ Data fetching complete!');
});

// Try with your own username:
// const myGitHub = new GitHubAPI('your-username');
// myGitHub.getAllUserData().then(console.log);

💡 Best Practices:

Always check response.ok or status codes
Handle network errors and timeouts
Use appropriate headers
Implement retry logic for transient failures
Cancel requests when component unmounts
Use environment variables for API keys

Next Steps

Now that you can make HTTP requests, learn about JSON - the data format that powers most web APIs.

← Async & Await JSON →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Fetch API in JavaScript

🤔 What is Fetch API?

💡 Key Features

Browser Support

📝 Basic GET Request

Response Properties:

📨 POST Request with JSON

Common Headers:

🔄 All HTTP Methods

HTTP Methods:

When to Use:

🚨 Advanced Error Handling

HTTP Status Code Groups:

🎯 Practical Example: GitHub API

💡 Best Practices:

Next Steps

Follow Us

Our Tools

Our Company

Special Tools