Error Handling in API Requests with JavaScript | CodeSignal Learn

Error Handling in API Requests with JavaScript | CodeSignal Learn

Introduction to Error Handling in API Requests

Welcome to the first lesson of Efficient API Interactions with JavaScript . This course will teach you how to handle common scenarios when working with APIs more effectively using JavaScript . A critical aspect of working with APIs is error handling . Proper error management enhances application robustness and improves user experiences by delivering meaningful feedback when issues arise. Our goal in this lesson is to empower you with the ability to manage these situations effectively.

Understanding HTTP Status Codes

When a request is sent to an API, the server responds with an HTTP status code . These codes communicate the result of your request. Understanding them is crucial for effective error handling. Here's a brief overview: 2xx (Success): Indicates that the request was successfully received, understood, and accepted, such as 200 OK . 4xx (Client Errors): Suggests a problem with the client's request, like 404 Not Found . 5xx (Server Errors): Indicates the server encountered an error fulfilling a valid request, with 500 Internal Server Error being a common example. By monitoring these status codes, you can determine whether a request was successful or if there's an issue to address.

Handling Unsuccessful Status Codes

JavaScript uses the Fetch API, which handles HTTP requests via Promises. Handling errors involves checking the response status and managing failures within try...catch blocks using async/await . This method provides a streamlined approach for detecting HTTP errors. Consider the following example, which fetches to-do items from an API: JavaScript // Base URL for the API const baseUrl = "http://localhost:8000"; // Function to fetch all todos with error handling using async/await async function fetchTodos() {try {const response = await fetch(`${baseUrl}/todos`); if (!response.ok) {// Log an error message for any 4xx or 5xx status codes console.log(`HTTP error! Status: ${response.status}, Status Text: ${response.statusText}, URL: ${response.url}`); return;} const data = await response.json(); // Log success message console.log("Todos fetched successfully!"); // Process data here} catch (error) {// Log any errors that occur console.log(`Error occurred: ${error.message}`);}} fetchTodos(); This example uses async/await to handle asynchronous operations, along with a try...catch block to manage errors. This makes error handling straightforward, allowing targeted management of request errors and comprehensive issue tracking.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Following our discussion on handling unsuccessful status codes, let’s explore specific examples. In this case, a GET request is sent to a non-existent route, resulting in an error because a 404 Not Found status code is returned.

JavaScript

// Function to attempt fetching from a non-existent endpoint using async/await
async function fetchInvalidRoute() {
  try {
    const response = await fetch(`${baseUrl}/invalid-route`);
    if (!response.ok) {
      console.log(`HTTP error! Status: ${response.status}, Status Text: ${response.statusText}, URL: ${response.url}`);
      return;
    }
    await response.json();
  } catch (error) {
    console.log(`HTTP error occurred: ${error.message}`);
  }
}

fetchInvalidRoute();

This will produce output highlighting that the resource was not found:

text

HTTP error! Status: 404, Status Text: Not Found, URL: http://localhost:8000/invalid-route

Next, consider an error scenario involving a POST request with a missing required field, such as title, resulting in a 400 Bad Request.

JavaScript

// Function to send a POST request without the 'title' in the payload using async/await
async function postWithoutTitle() {
  try {
    const response = await fetch(`${baseUrl}/todos`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({}),
    });
    if (!response.ok) {
      console.log(`HTTP error! Status: ${response.status}, Status Text: ${response.statusText}, URL: ${response.url}`);
      return;
    }
    await response.json();
  } catch (error) {
    console.log(`HTTP error occurred: ${error.message}`);
  }
}

postWithoutTitle();

The resulting output shows a 400 Bad Request error, signaling missing required fields:

text

HTTP error! Status: 400, Status Text: Bad Request, URL: http://localhost:8000/todos

Let’s examine how to manage broader request-related issues like connectivity problems, which can occur independently of the HTTP response.

JavaScript

// Attempt to fetch todos from an invalid URL using async/await
async function fetchFromInvalidUrl() {
  try {
    const response = await fetch('http://invalid-url');
    if (!response.ok) {
      console.log(`HTTP error! Status: ${response.status}, Status Text: ${response.statusText}, URL: ${response.url}`);
      return;
    }
    await response.json();
  } catch (error) {
    console.log(`Other error occurred: ${error.message}`);
  }
}

fetchFromInvalidUrl();

If a connection cannot be established, you’ll receive output describing the connectivity issue:

text

Other error occurred: fetch failed

These examples expand on the principles of exception handling we previously discussed, providing detailed insights into effectively managing errors in different API interaction contexts.