In this series of articles we will learn everything about asynchronous JavaScript, covering all the main concepts that have been implemented in JavaScript over the years. Furthermore, we will together create an application that will consume a game API, where we can search for our favorite games and, by clicking on an item, view the games related to it. See how this project will look in the end:
Did you like this idea? Then, join us on the journey through asynchronous JavaScript.
In this first article, we will talk about the difference between synchronous and asynchronous requests. To understand this difference, we will need to go back in time a little.
A Little History
For many years on the Web, the only way available for us to make requests to a server or execute functions was through synchronous code.
In synchronous code, all functions and requests work in sync, in direct contact, from the beginning to the end of the communication. This way, this code only allows one request at a time. As mentioned above, for many years on the Web, this was how systems operated. However, over time, certain issues were noticed that could become a problem.
For example: if we make a request to an API, we need to wait for its response. So far, so good. But, imagine that we have more than one request to make. With synchronous code, any other requests beyond the primary one are blocked until the first one finishes. In other words, we have to wait for the response from the first request before moving on to the next. This could affect the user experience, making our site feel somewhat monotonous.
An asynchronous request is different. It does not work in sync. This way, we can make multiple requests at the same time, and one request will not affect another. This is impressive and greatly helps in performance and user experience as well. In short, with asynchronous code, our site becomes more dynamic.
To better understand this difference, let’s think of the following illustration: in the past, in the 90s, web browsers did not have tab capabilities. In other words, if we wanted to access a site, we had to do this one by one. Imagine: you want to go to Spotify. You access this site, no problem. But at the same time, you want to go to Hcode’s site to read programming articles while listening to music. If the browser has only one tab, that is not possible. You need to leave one site to go to another. This is the concept of a synchronous request.
However, still talking about browsers, the Opera browser was created in 2000, bringing as its main novelty the tab feature, available in almost all current browsers. With tabs, we can access multiple sites at the same time. We can go to Spotify, YouTube, and Hcode’s site at the same time, and one tab does not interfere with the other. This is the concept of an asynchronous request.
Now, a question: do you prefer to access multiple tabs at the same time or just one at a time? I imagine your choice is the former. Similarly, asynchronous requests are more commonly used on the Web today, and understanding how JavaScript manipulates them can be a differential in our code. Asynchronous requests were a true revolution on the Web. This concept inspired the creation of tools still used today, like AJAX, which is partly based on JavaScript. We hope you enjoyed this first article.
With this information in mind, we can move a little further in time, as JavaScript has been specializing more and more to provide us with more ease with asynchronous requests.
A first aid was the use of callbacks. We will talk about this concept in the next article: Asynchronous JavaScript: The Complete Guide - Part 2 - Callbacks, until then!