Build Asynchronous features using JavaScript
Asynchronous code is a foundation of the modern web.
- Writing Async code require some experience coding in JavaScript and making API requests using HTTP.
- Also as a basic know how working Ajax with APIs.
What is Asynchronous and Callbacks ?
Asynchronous vs. synchronous
The term asynchronous has technical applications in the field of programming. However, it also fundamentally describes experiences that we all go through every day. Now, asynchronous is the opposite of synchronous. When a set of things has to happen one after another, that’s a synchronous process.
Synchronous processes are sometimes described as blocking, because the next step in the process is blocked from happening until the current step is finished.
What is asynchronous in programming ?
We can build program flow in Javascript in two different ways: synchronously and asynchrounously.
Synchronous code
- Using synchronous program flow, code is executed in the order it appears in your Javascript files.
- In synchronous program flow, the browser parses and executes only one statement at a time. This results in our statements being executed in order.
- Synchronous program flow exhibits a behavior known as blocking. Meaning that later statements are prevented from executing until earlier statements are finished. In many cases, this is what we want. For instance, a value needs to be calculated first before it can be used.
But if an earlier statement may take awhile to execute and statements that follow don’t rely on that earlier statement having finished then synchronous program flow can needlessly slow down our apps. In this case we want to use asynchronous program flow. When we write this type of code, also known as asynchronous code or simply, async. The parser can start executing some code and continue that execution while other code is executed, as well.
Asynchronous code
Now technically, Javascript has only a single thread but it does have a mechanism that allows some processes to execute in parallel while other things are going on.
- Now remember that synchronous code is executed only in the main program flow. While we’ve seen that asynchronous code is instead moved over to execute in parallel.
- This means that the statements are executed simultaneously.
- The upshot of this architecture is that asynchronous program flow lets us write code that’s non-blocking.
We write asynchronous code when we want to give part of our code time to complete, while still allowing the parsers to execute the code that follows right away.
Now we will talk about most common situation when we use asynchronous program flow that is called Ajax
Ajax
One of the most common situations where we use asynchronous program flow is when we make ajax requests. We write code using XHR or fetch or maybe a library specific method that sends a request for data to a remote server. This code defaults to an asynchronous mode, meaning that the request gets sent off and while the parser is waiting for a response the main program flow moves on to execute other code, like responding to user interactions.
What callbacks mean ?
JavaScript includes a handful of built-in functions that are executed asynchronously by default. These include ajax() methods, such as those in an XMLHttpRequest Object as well as timing functions like setTimeout() and animation methods like requestAnimationFrame().
These asynchronous methods and functions have long provided the foundation for building asynchronous code in Javascript.
Sometimes we want to specify additional functions or methods to execute after an asynchronous function has finished. Traditionally, this has been accomplished using the callback pattern. In this pattern, an asynchronous function is called and it’s execution happens in parallel while the main program flow continues. This asynchronous function takes another function as an argument. After the statements of the original function are executed, the function passed as an argument is called. This function in known as a callback function. A callback enables you to specify what should happen next after a function is executed asynchronously.
For instance, the asynchronous setTimeout() function takes two arguments, a callback function, and delay time in milliseconds.
setTimeout(callback, milliseconds, param1, param2, …)
In this code, the first argument is the callback function. After the callback function is the second and final argument which is the length of the delay in milliseconds.
When setTimeout() is called, it’s moved out of the main program flow and then pauses for the specified number of milliseconds . After the time is elapsed, The callback function is called .
What fail callbacks mean ?
Often the implementation of the callback bring to us what we need ,so what happens when the response contains something other than the data we expect? We can receive an authentication error, a notification that the service is down, or any one of a number of other responses that don’t include the data we’re looking for. To deal with this, it’s common to use error checking in conjunction with multiple callbacks. So when the response comes in, instead of simply assuming we have good data and calling the success callback, we can check what kind of response we got. If our Ajax request results in a 200 response, then we know the request succeeded and we have data so we can call the success callback. But for any other response code, we may or may not be getting the data we expect, and we’re probably not. So we want to instead call a different callback function to examine the response and figure out how best to deal with it.
At this point i want to thanks so much for reading this article. You now have a fuller understanding of what asynchronous code does, what’s going on under the hood in common asynchronous methods. Feel free to follow me online. Now take your skills and build something amazing. Good luck!
Resources :
- Lynda.com
- docs.aws.amazon.com
- W3school
Comments