In this article we will learn about asynchronous Javascript but before we delve into asynchronous Javascript, it is pertinent to examine Synchronous code and understands how its works
It is important to understand Synchronous code because by default Javascript is a Synchronous language
In the JavaScript code snippet provided above, there are three lines of instructions. The browser effectively steps through each instructions one after the other, in the order written. This implies that the browser waits until one instruction is completed before executing the next.
This synchronous behavior of JavaScript ensures that the console logs are displayed in the order specified in the program.
JavaScript can only do one thing at a time. This synchronous nature of JavaScript can lead to problems especially when waiting for tasks that takes significant amount of time to complete
What then is the solution?
The solution will look like this:
1.Initiate a long-running operation by invoking a function.
Enable that function to commence the operation and promptly return, ensuring our program remains responsive to other events.
Ensure the function executes the operation without halting the main thread, possibly by initiating a new thread.
4.Inform us of the operation's outcome once it finishes at a later time.
Asynchronous JavaScript helps implement this solution.
Asynchronous code can execute several tasks concurrently while while tasks in the background finish. This is what we call non-blocking code. The execution of additional code continues uninterrupted while an asynchronous task completes its operations.
Asynchronous programming can significantly improve the performance and responsiveness of an application
Here's an example of an asynchronous program using the setTimeout method:
In the above snippet, the setTimeout method triggers the execution of a function after a designated time. The function supplied to setTimeout operates asynchronously, allowing the program to proceed to the subsequent line of code without waiting for the timeout to complete.
When the code is run, the output will be
As you can see, console.log("First timeout completed") will be executed after 2 seconds. Meanwhile, the script continues to execute the next code statement and doesn't cause any "blocking" or "freezing" behaviour.
JavaScript offers numerous approaches to asynchronous programming. Among these, employing async and await is the best techniques.
Async Functions with async/await
Async/Await is a feature that allows you to write asynchronous code in a more synchronous, readable way.
The await keyword
The await keyword is placed before the call to a function or variable that returns a promise. It makes JavaScript wait for the promise object to settle before running the code in the next line.
Now if you run the code above, you might get an error like this:
This error occurs because the await keyword must be used inside an asynchronous function or a module.
The Async Keyword
To create an asynchronous function, you need to add the async keyword before your function name. Take a look at line 1 in the example below:
Here, we created an asynchronous function called jsonFunction() and put the code that uses the await keyword inside it. We can then run the asynchronous function by calling it, just like a regular function.
Conclusion
Now you've learned how the async/await syntax works. The syntax makes working with promises much easier by removing the need for .then() and .catch() method chaining, which also removes the need for nested callbacks.
Top comments (0)