fetch('https://jsonplaceholder.typicode.com/posts/100')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP error, status = ' + response.status);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

This example demonstrates checking the response status before processing the data. If the status is not OK, an error is thrown, which is then caught and logged.

Network Error Handling

In addition to handling HTTP errors, it's essential to manage network errors, such as loss of connectivity. The catch block will handle these scenarios, allowing you to provide feedback to the user.

fetch('https://invalid-url')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Network error:', error);
  });

In this case, if the URL is invalid or there are connectivity issues, the error will be caught and logged, allowing for graceful error handling.

Edge Cases & Gotchas

When using the Fetch API, several edge cases can lead to unexpected behavior if not handled correctly. Understanding these pitfalls is essential for writing robust applications.

Handling CORS Issues

Cross-Origin Resource Sharing (CORS) is a security feature implemented in web browsers that restricts web applications from making requests to a different domain than the one that served the web page. If a fetch request violates CORS policies, the request will fail, and an error will be thrown.

fetch('https://another-domain.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('CORS error: ' + response.status);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

To resolve CORS issues, the server must include the appropriate headers (like Access-Control-Allow-Origin) in its response. Without these headers, the fetch request will not succeed.

Request Timeout

The Fetch API does not support request timeouts natively. If a request takes too long, it will hang indefinitely unless manually aborted. You can implement a timeout mechanism using the AbortController.

const controller = new AbortController();
const signal = controller.signal;

const timeout = setTimeout(() => controller.abort(), 5000);

fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => {
    clearTimeout(timeout);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

This example demonstrates how to use AbortController to cancel a request if it exceeds a specified timeout period.

Performance & Best Practices

To optimize the performance of applications that utilize the Fetch API, consider the following best practices:

Batch Requests

Making multiple fetch requests in parallel can reduce load times significantly. Use Promise.all to handle multiple requests simultaneously, improving user experience.

const urls = [
  'https://jsonplaceholder.typicode.com/posts/1',
  'https://jsonplaceholder.typicode.com/posts/2',
  'https://jsonplaceholder.typicode.com/posts/3'
];

Promise.all(urls.map(url => fetch(url)))
  .then(responses => Promise.all(responses.map(res => res.json())))
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

This example demonstrates how to fetch multiple resources in parallel, reducing the overall waiting time for the user.

Use of Caching

To optimize performance, consider utilizing caching strategies. The Fetch API supports cache options that can help improve load times by storing responses for reuse.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'GET',
  cache: 'force-cache'
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

In this example, the cache option is set to 'force-cache', which will use a cached response if available, enhancing performance.

Real-World Scenario: Building a Simple Weather App

To demonstrate the Fetch API's capabilities, we will build a simple weather application that retrieves data from a weather API and displays it on a webpage. This project will integrate various Fetch API features, including GET requests, error handling, and dynamic HTML updates.

const form = document.querySelector('form');
const weatherDisplay = document.querySelector('#weather');

form.addEventListener('submit', event => {
  event.preventDefault();
  const city = form.elements.city.value;
  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY&units=metric`)
    .then(response => {
      if (!response.ok) {
        throw new Error('City not found');
      }
      return response.json();
    })
    .then(data => {
      const weather = `Temperature: ${data.main.temp}°C, Weather: ${data.weather[0].description}`;
      weatherDisplay.textContent = weather;
    })
    .catch(error => {
      weatherDisplay.textContent = 'Error: ' + error.message;
    });
});

This code creates a simple weather app that allows users to enter a city name. Upon form submission, a fetch request is made to the OpenWeatherMap API to retrieve the current weather data. The response is processed, and the weather information is displayed on the webpage. If an error occurs, an appropriate message is shown.

Conclusion

• The Fetch API is a powerful tool for making HTTP requests in JavaScript, providing a more modern alternative to XMLHttpRequest.
• Understanding GET and POST requests is essential for interacting with APIs and sending data to servers.
• Error handling is crucial; always check the response status to ensure successful requests.
• Optimizing performance through batch requests and caching can significantly enhance user experience.
• Real-world applications of the Fetch API include dynamic data fetching, form submissions, and more.