Introduction
Since JavaScript is a single-threaded programming language with a synchronous execution model that processes one operation after another, it can only process one statement at a time. However, an action like requesting data from an API may take an indefinite amount of time depending on the size of the requested data, network connection speed and other factors. If API calls are performed in a synchronous manner, the browser will not be able to handle any user input until that operation is completed, such as scrolling or clicking a button. This is known as blocking.
To prevent blocking behavior, the browser environment has many web APIs that can access JavaScript that are asynchronous, meaning they can run parallel to other activities instead of sequentially. This is useful because it allows the user to continue using the browser in general while processing asynchronous activities.
As a JavaScript developer, you need to know how to work with the Asynchronous Web API and how to handle responses or errors in those activities. In this article, you will learn about Event Loop, the real way to deal with asynchronous behavior via callback, updated ECMAScript 2015 additions to commitments, and the modern practice of using async / await.
Contents
Callback function
Event loop
Async / await with async function
Nested Callback and Pyramid of Doom
Promise
Event loop
An example of this is the settimeout method. When a setTimeout operation is processed within the stack, it is sent to the corresponding API that waits for a certain amount of time to return this operation for processing.Event Loop simplifies this process, It constantly checks to see if the call stack is empty.
Event Loop has a simple function - monitoring call stacks and callback queues. If the call stack is empty, the event will take the first event from the loop row and push it towards the call stack, which runs it efficiently. This type of repetition is called a tick in the event loop.
function first() {
console.log(1)
}
function second() {
console.log(2)
}
In this code, you define three functions that print numbers with console.log ().
Next, type the call into the function:
first ()
second ()
Callback
The key to solving this problem is to use the callback function. The callback function has no special syntax; They are only one function which has been passed as an argument to another function. A function that takes on another function as an argument is called a high-order function. According to this definition, any function can become a callback function if it is passed as an argument. Callbacks are not asynchronous by nature, but can be used for asynchronous purposes.
Nested Callback and Pyramid of Doom
A callback function is an efficient way to ensure that one function is delayed until the other is complete and returns with data. However, due to the nested nature of the callback, the code can become cluttered if you have a lot of asynchronous requests that depend on each other. This was a big disappointment for JavaScript developers at first, and as a result code containing nested callbacks is often called "Pyramid of Doom" or "Callback Hell".
Promise
A promise represents the completion of an asynchronous function. It is an object that can return a value in the future. It achieves the same basic goals as a callback function, but with many additional features and a more readable syntax.As a JavaScript developer, you'll probably spend more time creating commitments, because it's usually an asynchronous web API that promises to feed the developer. This tutorial will show you how to do both.
By making this change we now make sure that the else branch is inserted and is called the reject function instead of the solution function. By calling the denial function we are aware of the fact that the promise cannot be successfully resolved because an error has occurred.
Error handling
So far, you have only managed to make a commitment with a successful determination, which keeps the promise fulfilled. But often with an asynchronous request you have to handle an error if the API is down, or a malformed or unauthorized request is sent. A commitment should be able to handle both cases. In this section, you will create a promise and create a function to test both success and failure of use.
To handle the error, you will use the cache instance method. This will give you a failed callback with errors as parameters.
Async function with async / await
An asynchronous function allows you to manage asynchronous code in a way that shows synchronous. The async functions still use promise under the hood, but have a more traditional JavaScript syntax. In this section, you will try examples of this syntax.
Although this function still does not handle some asynchronous functions, it behaves differently than a conventional function. If you run the function, you will see that it provides a promise instead of a ‘Promise Status’ and ‘Promise Value’.
Conclusion
In this article, you learned how the host manages the execution of code, including stacks and queues, using the environment event loop. You've also tried three ways to manage the success or failure of an asynchronous event, including callbacks, promises, and asynchronous / waiting syntax. Finally, you use the Fetch Web API to manage asynchronous actions.
Top comments (0)