Interacting with APIs Using JavaScript: GET Requests and Error Handling

Welcome to the second lesson in our journey of interacting with APIs using JavaScript. In the previous lesson, we laid a strong foundation by understanding RESTful APIs and how HTTP requests facilitate interactions with them. We used curl to manually craft and send a GET request to an endpoint. Now, we are transitioning to automating this process using JavaScript. This lesson introduces the fetch() method, utilizing the async/await syntax, which allows us to send HTTP requests effortlessly in our scripts, making it an invaluable tool in the realm of web development and API integration.

To make HTTP requests in JavaScript, particularly in a Node.js environment, we use native methods like fetch(). Ensure you have Node.js installed on your device, which comes with npm (Node Package Manager). Once set up, you'll be ready to automate requests, saving time and boosting efficiency in your development workflow.

When interacting with an API, it's helpful to define a base URL for the service you're communicating with. This makes your code more modular and easy to maintain, allowing you to change the root of your API URL in one place without modifying each request.

// Base URL for the API
const baseURL = "http://localhost:8000";

By setting this base URL, we can easily concatenate endpoints for different services within the API, making our code cleaner and more adaptable.

Let's dive into the process of fetching data from an API using JavaScript's fetch() method with the async/await syntax. Our goal is to retrieve a list of to-do items from the /todos endpoint using the GET method.

async function fetchTodos() {
  try {
    const response = await fetch(`${baseURL}/todos`);
    const data = await response.text();
    console.log("Raw Response:");
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchTodos();

By using the async keyword before a function, we can use the await keyword inside it to pause the execution until a promise is resolved. This allows us to write asynchronous code in a synchronous manner, making it easier to read and maintain.