I built the same program 4 different ways. I started with callbacks, moved on to Promises, used generators, and finished up with async/await. The program: Makes a request to Github’s users endpoint Pulls back my Github profile Logs the response Here’s what I came up with. Callbacks I struggled to make an request using callbacks. I’ve mostly used Promises to write asynchronous . I generally use or in my applications, which are both Promise-based. HTTP JavaScript axios fetch I ended up having to turn to for this version of the application, which I’ve never used before! XMLHTTPRequest Using Callbacks I’ll walk you through what this code does: I define a function called . It’s designed to actually make the request to Github. makeHTTPRequest I pass three methods to , , , and . is the endpoint I want to hit. is the HTTP method I want to use. And is the function I want to call when I actually get a response back from Github. makeHTTPRequest url methodType callback url methodType callback I define a function called and pass it as an argument. The function takes the response I receive from Github, and parses it to JSON. Then, it logs the parsed response. getLogin response I pass into as . That means will take the response from Github has it’s argument. getLogin makeHTTPRequest callback getLogin Promises After achieving my goals with callbacks, I attempted with promises. This felt straightforward, since I’ve done it many times before. Using Promises I defined a function called and passed it a username. makeHTTPRequest I used to make a request to Github. fetch I use to wait for the request to Github to complete, and then convert the response to JSON. .then() I log the response Generators This was my first foray into generators. The syntax and concept were totally foreign to me upon approaching this challenge. Using Generators I define and say that it’s a generator by using the * syntax. I pass in as an argument. getUser username 2. I create a variable called and set it equal to response I receive from Github after making an HTTP request using . The important piece of line 3 is that I use the keyword . is telling my program that I do want to set equal to the response I get back from Github, but only after the request is completed. response fetch yield yield response 3. I follow the same pattern again when I set equal to . I have to wait for the Promise to resolve before I can set my variable. If I don’t use , when I try to log , I get: back. parsedResponse response.json() yield parsedResponse Promise {<pending>} Async/Await Finally, I wrote the application once more using ES7 async/await. Since I did this after building the same application with generators, it became really obvious how async/await is built on top of generators. I define an function called that takes as an argument. async getUser username I created a variable called and set it equal to the response I receive from Github after making a request to the endpoint. The key is that I use the keyword to tell my program to wait for the request to resolve itself before setting equal to the response I get back. response /users/:id await response I use the same pattern again on line 4. Then I log the parsed response. Takeaways This was a worthy endeavor for a few reasons. First of all, I hadn’t used callbacks much, so I didn’t really know how big of a deal Promises were. I also had been taking fetch and axios for granted, since they made making HTTP requests so much more straightforward. I also had never used generators or async/await. Although I found async/await much easier to use than generators, it was helpful to see how async/await was built on top of generators. It was also fun to get my hands dirty with some ES7 syntax.
