**Course Title:** Modern JavaScript Programming: From Fundamentals to Full-Stack Development **Section Title:** Asynchronous JavaScript: Promises, Async/Await **Topic:** Build a program that fetches data from an API using async/await and Promises. **Objective:** In this lab, you will learn how to build a program that fetches data from an API using async/await and Promises. By the end of this topic, you should be able to write your own code to fetch data from an API and handle the response using asynchronous programming techniques. **Introduction** In the previous topics, we covered the basics of asynchronous programming in JavaScript, including callbacks, promises, and async/await. In this lab, we will put these concepts into practice by building a program that fetches data from an API. **Understanding the API** For this lab, we will be using the [Random User API](https://randomuser.me/), which provides a simple API for generating random user data. The API endpoint we will be using is: https://randomuser.me/api/ **Step 1: Setting up the Project** Create a new JavaScript file called `fetch-api.js` and add the following code: ```javascript // Import the console module const console = require('console'); // Define the API endpoint URL const apiUrl = 'https://randomuser.me/api/'; ``` **Step 2: Fetching Data using async/await** Add the following code to `fetch-api.js`: ```javascript // Define an async function to fetch data from the API async function fetchData() { try { // Use the fetch API to send a GET request to the API endpoint const response = await fetch(apiUrl); // Check if the response is OK (200-299) if (response.ok) { // Parse the response data as JSON const data = await response.json(); // Log the response data to the console console.log(data); } else { // Log an error message to the console console.log(`Error: ${response.status} ${response.statusText}`); } } catch (error) { // Log any errors to the console console.log(`Error: ${error.message}`); } } // Call the fetchData function fetchData(); ``` **Step 3: Fetching Data using Promises** Add the following code to `fetch-api.js`: ```javascript // Define a function to fetch data from the API using promises function fetchDataUsingPromises() { // Use the fetch API to send a GET request to the API endpoint fetch(apiUrl) .then(response => { // Check if the response is OK (200-299) if (response.ok) { // Parse the response data as JSON return response.json(); } else { // Throw an error throw new Error(`Error: ${response.status} ${response.statusText}`); } }) .then(data => { // Log the response data to the console console.log(data); }) .catch(error => { // Log any errors to the console console.log(`Error: ${error.message}`); }); } // Call the fetchDataUsingPromises function fetchDataUsingPromises(); ``` **Comparison between async/await and Promises** Both async/await and promises are used to handle asynchronous operations in JavaScript. However, there are some key differences between the two approaches: * async/await is a more modern syntax for handling asynchronous operations, and it's generally easier to read and write. * Promises are more verbose, but they provide more control over the asynchronous operation. * async/await is built on top of promises, so you can use both in the same codebase. **Conclusion** In this lab, we built a program that fetches data from an API using async/await and promises. We learned how to use the fetch API to send a GET request to an API endpoint, and how to handle the response data using asynchronous programming techniques. We also compared and contrasted the async/await and promises approaches for handling asynchronous operations. **Exercise:** Using the concepts learned in this lab, try to modify the `fetch-api.js` file to fetch data from a different API endpoint. For example, you could use the [Star Wars API](https://swapi.co/) to fetch data about characters, planets, or spaceships. **External Resources:** * [Random User API](https://randomuser.me/) * [Star Wars API](https://swapi.co/) * [Fetch API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Async/await documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) * [Promises documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) **Leave a comment or ask for help:** If you have any questions or need help with the lab, please leave a comment below. We'll do our best to respond and provide guidance. That's it for this lab! In the next topic, we will cover the basics of DOM manipulation and event handling.