Asynchronous JavaScript PDF

Asynchronous JavaScript Asynchronous (or async) execution refers to execution that doesn’t run in the sequence it appears in the code. In async programming the program doesn’t wait for the task to complete and can move on to the next task. Dr. AISSAOUA HA...

Asynchronous JavaScript Asynchronous (or async) execution refers to execution that doesn’t run in the sequence it appears in the code. In async programming the program doesn’t wait for the task to complete and can move on to the next task. Dr. AISSAOUA HABIB University Setif -1-  Asynchronous JavaScript In a nutshell, the asynchronous implementation in JavaScript is done through a call stack, Callback Queue and WebAPI and EventLoop. Each engine contains a memory heap and a call stack where the heap is used to allocate memory and stack to do the function calling. Apart from these, a browser consists of WebApi's, EventLoop, and a Callback Queue. Dr. AISSAOUA HABIB University Setif -1- Asynchronous Behavior Dr. AISSAOUA HABIB University Setif -1-  Asynchronous / callback function There are several ways to handle asynchronous code. The method that you choose should depend on the type of application you want to develop. These methods include callback functions, promises, and async/await. A callback is just a function that's passed into another function, with the expectation that the callback will be called at the appropriate time. Dr. AISSAOUA HABIB University Setif -1- Asynchronous / callback function Dr. AISSAOUA HABIB University Setif -1-  Asynchronous / callback function The problem with callbacks is that if you have multiple asynchronous functions that depend on other asynchronous function execution; creating a chain of nested callbacks, it leads to callback hell. Callback hell affects the readability and maintainability of the code Dr. AISSAOUA HABIB University Setif -1-  Promise To create a promise object, we use the Promise() constructor. let promise = new Promise(function(resolve, reject){ //do something }); The Promise() constructor takes a function as an argument. The function also accepts two functions resolve() and reject(). If the promise returns successfully, the resolve() function is called. And, if an error occurs, the reject() function is called. Dr. AISSAOUA HABIB University Setif -1-  Promise Let's suppose that the program below is an asynchronous program. Then the program can be handled by using a promise. Dr. AISSAOUA HABIB University Setif -1-  Promises A promise may have one of three states: Pending, Fulfilled, Rejected A promise starts in a pending state. That means the process is not complete. If the operation is successful, the process ends in a fulfilled state. And, if an error occurs, the process ends in a rejected state. For example, when you request data from the server by using a promise, it will be in a pending state. When the data arrives successfully, it will be in a fulfilled state. If an error occurs, then it will be in a rejected state. Dr. AISSAOUA HABIB University Setif -1-  Promise The then() function is invoked when a promise is either resolved or rejected, and the catch() function is invoked when a promise is either rejected or some error has occurred in execution. then() method takes two functions as parameters: 1. First function is executed if promise is resolved and a result is received. 2. Second function is executed if promise is rejected and an error is received. (It is optional and there is a better way to handle error using.catch() method) Dr. AISSAOUA HABIB University Setif -1-  Promise Syntax: If you are interested only in successful outcomes, you can just pass one argument to it, like this: Dr. AISSAOUA HABIB University Setif -1-  Promise The catch() method is used with the callback when the promise is rejected or if an error occurs: Dr. AISSAOUA HABIB University Setif -1-  Promise The promise.then() call always returns a promise We can chain.then together to transform values or run additional async actions one after another. When the first.then method returns a value, the next.then method can receive that. The second one can now pass to the third.then() and so on. Dr. AISSAOUA HABIB University Setif -1-  Promise Dr. AISSAOUA HABIB University Setif -1-