When cleaning your home, it wouldn't be very time efficient to first put the clothes in the laundry and sit there and wait until the clothes are done before moving on to the dishes.
Ideally, you'd want to start some task, and while that task is running, start another task. That's what's known as working in an asynchronous (async) manner!
- Creating Callbacks Overview
- Creating Promises Overview
- Homework: Putting it all together
With some local businesses opening up, people are starting to spend time together at area restaurants.
Imagine you and a friend are outside of the United States and decide to go to a restaurant. The process is usually the same wherever you go: You both provide your orders to the waiter, the waiter goes off, while you two continue conversing. After a while your order comes back.
This is a callback in real life😲
Simply put, you asked for something (a meal) and when the food is done, you will be notified.
fetchQuarantineMood is in charge of generating a random mood, and then calling the passed in function (hence the name "callback") with that mood.
Now that we've seen an example of what a basic callback looks like, it's a good time to point out a common notion: When using a callback, the implementation details of the callback logic are not important. It's a black box.
The other part to consider, is that because this is asynchronous, any code we have after our call to
With a stronger understanding of callbacks, feel free to take a moment to review a more real world example below. I made sure to add comments to help understand what is happening, though you're encouraged to play around with the code as well.
If the analogy for a callback is placing an order at a restaurant, the analogy for a promise is asking someone if they want to watch a movie.
In the above situation, there're a few ways this could turn out:
Good: You can go to the movies🍿
Bad: You're going to Netflix and quarantine alone😩
And in the meantime...I don't know.
Instead, we say resolved, rejected, and pending respectively.
Similar to before, let's take a look at what creating and using a basic promise looks like.
In the above example,
fetchUser is a function and inside of its body, we
Promise function expects a single function (a callback!) that gives us
Now there's a lot of functions being thrown around here, but just note that
reject are also functions. However, only one of them will be called based of off some condition--hence the if-statement.
Using a Promise
When calling a promise-based function, what is returned is an object whereby one of the properties we can use is
then. This property is a function that when called, takes in two arguments: A function that will run if things go well (
resolved), and another that will run with things do not (
🗒️ An important item to remember, especially when starting out, is that whatever value that we return from a promise, is wrapped in a promise. This allows us to chain promises together. You'll see an example of this in the example below.
Example: Promise Chaining and Error Handling
🚨Homework: Challenge Area🚨
In the above sandbox example, note that we are not checking for an error state. Let's fix that!
In the above sandbox:
- Create a function called
- Take in as an argument, a "message".
- Create an empty paragraph tag.
- Return a paragraph tag that has its
innerTextset to the provided message.
- Change the
addImageNodeToScreenfunction to be more generic so that it can accommodate adding any DOM node to the screen. Be sure to refactor areas where it's called.
- In the first
fetchUser, add a second argument.
- This function will be called if there is an issue fetching data from the api.
- This function should return an error message set to a string of your choosing, but beginning with "Error:" ie "Error: unable to fetch image"
- In the final
fetchUser, check if the given string startsWith
- If it does, call
createErrorMessagewith that string.
- Else, call
createImageNodeas it currently is.
- If it does, call
- Test out your solution by removing some characters from the
randomuser.me/apistring at the top of the file and then clicking the button.
You should see your error message!
However, I hope this serves as a practical guide to help you understand how to both use and create an async workflow!
Thanks for following along and I look forward to seeing your solutions, improvements, and thoughts in the comments!
🙏🏽 cover image and top image provided by icons 8