What is asynchronous code?
Do you ever find yourself trying to retrieve information and then display it on a webpage in what seems to be a simple fetch and render operation yet the page comes up empty? This is often caused by asynchronous code. Normally Javascript will run one line at a time. Yet sometimes when code takes longer than nearly instantly, javascript will put the current line on hold, and will execute the next line of code and will not return to the “skipped” line until the “skipped” line has been completed. This is asynchronous code and it is very common in Javascript. I am going to attempt to explain asynchronous code and some methods to work around it. It can be very powerful but can be quite frustrating when you aren’t fully sure what is going on. To start, let’s look what synchronous code is!
What is synchronous code?
Most common languages execute code synchronously. These include Ruby, Python, and C++. This means that they execute the first line, wait for it to finish, then execute the second line, wait for it to finish, then execute the third line and so forth. There is an immediate response. Code is run, and a response is generated. This makes predicting the output of your code easy. Start at the top left of your file and then move left to right and top to bottom. It makes sense that the computer executes the code this way because it can only do one thing at a time. It does the first thing first and the second thing second. What happens when the program uses something other that the processor? Such as it requests information from a server or even requests information from the hard drive on the computer? This type of action does not happen instantly, it can take some time. In this case Javascript will not allow the processor to sit and wait for the request to be handled and completed. It will handle this task asynchronously.
What is asynchronous?
Asynchronous code is when the program recognizes that it is waiting for something to finish and goes onto the next line of code. Once the code finishes the program will return to that lien of code to finish it. We see this happen often with fetch requests. A fetch request allows us to retrieve information from a backend. Javascript will send a request to a server for information, then wait for the server to send information back. Because this process does not happen instantly like most other Javascript processes, Javascript will confirm that the fetch was submitted, then will go on to the next line of Javascript code. This ability to execute code while waiting for information to be sent back to the program is asynchronous code. For more information on fetch requests go here. Asynchronous code helps to keep your program running smoothly and not stuck on one slow line.
What are the advantages of Asynchronous Code?
The images above help explain what asynchronous code is and more importantly show how effective it is in creating a smoother fast application. In the first image we see what would happen if we did not have asynchronous code. A fetch would occur, then we would have to wait for it to be completed before starting the next fetch and wait for it as well before we could render both pieces of information. However, in an asynchronous environment, we are able to request information, then move onto the next fetch, request the information then render the information when it is ready. In the synchronous environment the shortest time to render the information would be the sum of the fetch requests compared to the shortest time to render in an asynchronous environment would be the longer of the two fetch requests.
What are some problems with asynchronous code?
A major problem with asynchronous code is you don’t know how long a request may take. There are ways around this however. The most common is the callback function.
Callback Functions
Callback functions are functions that are not executed until something has occurred. A simple example is below. Javascript will not execute the function that console logs “Hello, World” until 1 second has past. “() => Console.log(“Hello, World”) is the callback function.
setTimeout = ( () => console.log("Hello, World", 1000);Oftentimes you will see the callback function without parentheses. If you used parentheses then the function would be called immediately. But without parentheses, you are just passing in the ability to call the function later. How does this relate to asynchronous code?
Promises
Promises are javascript code that is tells the program that something is coming. Say there is a fetch request; the program requests information from a server and then the program receives a promise. This promise is not the information; instead it is an object representing the completion or failure of the asynchronous action. It has the ability to tell the program when the information it requested is ready. In Javascript these promises are handled by ‘.then’ statements. You can see them in action below. The fetch is created; once the response is ready to be used, we convert it to a json data structure that can be ready by javascript. Once that function has been completed we move onto the next ‘.then’ statement, which calls the function ‘functionName’.
fetch(website.com)
.then(response => response.json())
.then(data => functionName() {
Do something
});