Asynchronous Code in JavaScript
Tags: javascript, codenewbie, challenge
Published: 2020-07-09 14:13:34

# Asynchronous Code

![Laundry](https://dev-to-uploads.s3.amazonaws.com/i/z38ndcme294tzhypcrar.png)

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!

Just as it applies to the real world, async code also exists. As such, this section will specifically cover the following pieces of async code as they relate to JavaScript:

1. Creating Callbacks Overview
2. Creating Promises Overview
3. Homework: Putting it all together

---

### Creating Callbacks

![covid dating](https://dev-to-uploads.s3.amazonaws.com/i/lyatpnvlgcb1z1ztxur5.png)

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.

Here's a small code example of a callback
![quarantine callback](https://dev-to-uploads.s3.amazonaws.com/i/w70zbkc04f1kgevkqb43.png)

In the above example, we first create a function that takes in as an argument, a function🤯. Remember that in JavaScript, functions can be passed around just like any other piece of data. Note that it's common to name this generic function `callback`.

This function, `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 `fetchQuarantineMood` will run. This notion of running our synchronous code first, then running our asynchronous code is known as the JavaScript event loop and is explained amazingly well in this YouTube video👇🏽

{% youtube 8aGhZQkoFbQ %}

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.

{% codesandbox callback-order-zicmh %}

---

### Creating Promises

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.

![async promise conversation with movie example](https://dev-to-uploads.s3.amazonaws.com/i/tvgrfs5mzgs0wxt76nqx.png)

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**.

This maps directly to how JavaScript promises work. However, we don't say _good_, _bad_ and _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.

![simple promise example](https://dev-to-uploads.s3.amazonaws.com/i/ho5z6qvgco6kkvr5jyuo.png)

In the above example, `fetchUser` is a function and inside of its body, we `return` a `new` `Promise`. The `Promise` function expects a single function (a callback!) that gives us `resolve` and `reject`. 

Now there's a lot of functions being thrown around here, but just note that `resolve` and `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 (`rejected`).

> 🗒️ 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**

{% codesandbox promises-project-7q013 %}

🚨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: 

1. Create a function called `createErrorMessage` that will:
  - Take in as an argument, a "message".
  - Create an empty paragraph tag.
  - Return a paragraph tag that has its `innerText` set to the provided message.
2. Change the `addImageNodeToScreen` function 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.
3. In the first `.then` of `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"
4. In the final `.then` of `fetchUser`, check if the given string [startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith) `Error:`
  - If it does, call `createErrorMessage` with that string.
  - Else, call `createImageNode` as it currently is.
5. Test out your solution by removing some characters from the `randomuser.me/api` string at the top of the file and then clicking the button. 

You should see your error message!

---

As is JavaScript, there's much more that we could discuss when it comes to callbacks, promises, and asynchronous code in general.  

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](https://icons8.com)