Handling fetch Errors

Welcome to this lesson on delicately handling errors when using the fetch API in JavaScript. This lesson is designed to help you understand and effectively manage errors that may arise when making network requests. We’ll explore two primary approaches: using Promises and the async/await syntax.

Introduction

In web development, handling errors gracefully is crucial, especially when dealing with network requests. The fetch API, a modern approach to perform network requests in JavaScript, can encounter various errors, such as network issues, server problems, or invalid responses. Proper error handling ensures a better user experience and aids in debugging.

Handling Errors with Promises

The fetch API returns a Promise that can either resolve to the response of the request or reject if the request cannot be made (like network failures). However, it’s important to note that fetch only rejects on network failures and does not reject on HTTP error statuses (like 404 or 500). We need to handle these explicitly.

Code Example: Promises

	// Making a network request to an API
	fetch('https://api.example.com/data')
	  .then(response => {
	    // Check if the response is OK (status code 200-299)
	    if (!response.ok) {
	      throw new Error('Network response was not ok ' + response.statusText);
	    }
	    return response.json(); // Parsing the JSON body of the response
	  })
	  .then(data => {
	    console.log('Data received:', data); // Handling the data
	  })
	  .catch(error => {
	    console.error('Fetch error:', error.message); // Handling any errors
	  });

In this example, we use .then() to handle the resolved Promise and .catch() to handle any errors. The error can be due to a network issue or an HTTP status indicating an error, which we manually check using response.ok.

Handling Errors with Async/Await

async/await syntax provides a more readable way to work with asynchronous operations like fetch. Error handling in async/await is done using try...catch blocks.

Code Example: Async/Await

	async function fetchData() {
	  try {
	    const response = await fetch('https://api.example.com/data'); // Await the fetch request
	    if (!response.ok) {
	      // Check for HTTP error statuses
	      throw new Error('Network response was not ok ' + response.statusText);
	    }
	    const data = await response.json(); // Parsing JSON
	    console.log('Data received:', data); // Handling the data
	  } catch (error) {
	    console.error('Fetch error:', error.message); // Handling any errors
	  }
	}
	
	fetchData(); // Execute the async function

In this approach, the try block contains the asynchronous code, and the catch block handles any errors that occur during the fetch operation. This pattern is cleaner and easier to read, especially for complex operations.

Conclusion

Error handling with the fetch API is essential for robust web applications. Whether you prefer Promises or async/await, understanding how to catch and handle errors will ensure your application can gracefully handle unexpected scenarios and provide informative feedback to the user.

Task

Try modifying the provided examples to fetch data from a different API endpoint. Experiment with handling different types of errors, such as invalid URLs or unreachable servers, and observe how your error handling code behaves in each scenario.