Async Programming and Callback Functions

To get started and code along with me, you can launch the workspace with this video, 0:00 or download the project files and open them in your favorite text editor. 0:04 I'm going to use Visual Studio Code. 0:07 In the project folder, you should see the file index.html, and 0:09 two folders, css and js. 0:14 The css folder contains the style sheet for this project, and 0:16 the js folder contains several JavaScript files. 0:19 You're going to learn how to build the API project using callbacks, promises, and 0:22 async-await starting with callbacks. 0:26 So I named each file according to the tools and technique we're going to use. 0:28 First, open callbacks.js and 0:33 you will see that I've already provided some code to get you started. 0:34 At the top, I initialized the variables that we'll use in our project. 0:38 For example, a URL to the API dot open notify endpoint which 0:42 returns all people currently in space, a Wikipedia API endpoint, and 0:46 a couple of variables that reference elements in index.html. 0:51 The function GetJSON uses XMLHttpRequest, or xhr, 0:55 to retrieve data from a server via a URL without having to do a full page refresh. 1:00 xhr is commonly used by developers to make ajax calls. 1:06 It's one of the web APIs you learned about earlier that the browser uses to manage 1:10 asynchronous requests. 1:14 You can learn a whole lot more about XHR in the videos and 1:15 additional resources posted in the teacher's notes with this video. 1:18 So the getJSON function initializes an XMLHttpRequest, then gets 1:21 the browser ready to make a GET request to the provided URL and sends the request. 1:26 XHR request also accept a callback so as soon as the server sent back its response, 1:32 it runs the callback function that's assigned to the onload event. 1:38 In this case it's checking the server response readystate and 1:42 status then parsing the response text to json, and 1:46 finally logging that data to the console for now. 1:49 Anytime the request changes, this callback function is going to fire and 1:52 update the data. 1:57 Right below, the function generate HTML creates a new section element for 1:58 each person in space and appends it to the div with the ID people. 2:03 Then sets the inner HTML to the markup defined in the template Literal using 2:08 the data passed to the function. 2:13 So this is essentially the HTML template for 2:15 displaying an astronaut's picture as well as their name, title, and a short bio. 2:18 All right, now that you're up to speed with the starter code, let's get coding! 2:23 First I'm going to call the get JSON function and 2:27 pass it the URL to the open notify API to make sure that everything works. 2:30 The URL is stored in the variable Astros' URL. 2:35 Get JSON currently logs the return data to the console. 2:38 So checking the console, I see that it works. 2:43 The API returns an object with a people array which holds six objects. 2:45 So that means that there are currently six people in space. 2:50 And we can see the craft and name properties in each object. 2:53 Back on our code, the getJSON function is going to be invoked and 2:57 execute the code and cite it after some event or user interaction happens. 3:01 In this case when the View all the People button is clicked. 3:07 So let's create an event listener for 3:10 the button using the add Event Listener method with btn.addEventListener. 3:13 Pass it the string, click, as the event type to listen for. 3:19 Next, as the second argument, I'll pass an anonymous function as the callback, 3:24 which will run getJSON as soon as the click event occurs. 3:30 I could have passed the body of the getJSON function entirely to add 3:34 event listener. 3:39 But this approach is much cleaner and modular as you'll soon see. 3:40 DOM events like click, scroll, and key up are highly intermittent. 3:44 They happen randomly, and the browser cannot predict when they happen. 3:49 For example, the browser doesn't exactly know when this button will be clicked. 3:53 It may never be clicked at all by the user. 3:56 So addEventListener waits for the click event to happen. 3:59 And it calls back the function passed to it only when the event occurs. 4:03 In our case it's going to invoke getJSON and 4:07 use the URL passed to it to make the Ajax request. 4:10 There are time when browser is may be flooded and 4:13 overwhelmed by different events happening all at once. 4:16 Now imagine if each of those events blocked other functions from executing. 4:18 So because of this, the order of DOM events is processed asynchronously. 4:23 A click on an element with a click event handler, for example, will add a task to 4:28 the callback queue which might have other events waiting in queue. 4:32 Each will eventually make its way onto the call stack to be executed. 4:36 All right, let's test our code. 4:40 Back in the browser I'll refresh and when I click the button, 4:42 the data from the open notify API gets logged to the console, good! 4:46