From Callbacks to Async AwaitDecember 9, 2017
I built the same program 4 different ways. I started with callbacks, moved on to Promises, used generators, and finished up with async/await.
Makes a request to Github’s users endpoint
Pulls back my Github profile
Logs the response
Here’s what I came up with.
I ended up having to turn to XMLHTTPRequest for this version of the application, which I’ve never used before!
I’ll walk you through what this code does:
I define a function called
makeHTTPRequest. It’s designed to actually make the request to Github.
I pass three methods to
urlis the endpoint I want to hit.
methodTypeis the HTTP method I want to use. And
callbackis the function I want to call when I actually get a response back from Github.
I define a function called
getLoginand pass it response as an argument. The function takes the response I receive from Github, and parses it to JSON. Then, it logs the parsed response.
makeHTTPRequestas callback. That means
getLoginwill take the response from Github has it’s argument.
After achieving my goals with callbacks, I attempted with promises. This felt straightforward, since I’ve done it many times before.
I defined a function called
makeHTTPRequestand passed it a
fetchto make a request to Github.
.then()to wait for the request to Github to complete, and then convert the response to JSON.
I log the response
This was my first foray into generators. The syntax and concept were totally foreign to me upon approaching this challenge.
getUserand say that it’s a generator by using the
*syntax. I pass in username as an argument.
I create a variable called
responseand set it equal to response I receive from Github after making an HTTP request using
fetch. The important piece of line 3 is that I use the keyword
yieldis telling my program that I do want to set response equal to the response I get back from Github, but only after the request is completed.
I follow the same pattern again when I set
response.json(). I have to wait for the Promise to resolve before I can set my variable. If I don’t use
yield, when I try to log
parsedResponse, I get:
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 async function called getUser that takes username as an argument.
I created a variable called
responseand set it equal to the response I receive from Github after making a request to the
/users/:idendpoint. The key is that I use the
awaitkeyword to tell my program to wait for the request to resolve itself before setting response equal to the response I get back.
I use the same pattern again on line 4.
Then I log the parsed response.
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.
Do you want design systems tips and tricks sent to your inbox?