Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
19 views

Synchronous and Asynchronous JavaScript

Uploaded by

Dineshsura Dinesh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Synchronous and Asynchronous JavaScript

Uploaded by

Dineshsura Dinesh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Synchronous and

Asynchronous JavaScript
Synchronous JavaScript:
Synchronous means to be in a sequence. Every statement of the code gets
executed one by one. So, basically a statement has to wait for the earlier
statement to get executed.

Asynchronous JavaScript :
Asynchronous code allows the program to be executed immediately whereas
the synchronous code will block further execution of the remaining code until
it finishes the current one. This may not look like a big problem but when you
see it in a bigger picture you realize that it may lead to delaying the User
Interface.
setTimeout( ) :
The setTimeout() method executes a block of code after the specified
time. The method executes the code only once.

Example :
Explanation:

In this example, the setTimeout() method calls the greet() function after 3000
milliseconds (3 second). Hence, the program displays the text Hello Everyone
only once after 3 seconds.
Callback :
Callback is passing functions as arguments to another function which
will be executed later within the outer function.

Example :
Explanation:

In this example, there are two functions. While calling the greet() function, two
arguments (a string value and a function) are passed. The callMe() function is
a callback function.
Callback Hell :
Callback Hell is nesting multiple callbacks within a function.

Example :
Explanation:

In this example, getUserData takes in an argument that is dependent or needs


to be extracted from the result produced by getArticles which is inside user.
The same dependency can be observed with getAddress also. This is termed
callback hell.
Promise :

A promise is a good way to handle asynchronous operations. It is used to find


out if the asynchronous operation is successfully completed or not.
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. A promise may have one of three
states.
Create a Promise :
.
To create a promise object, use the Promise() constructor

Syntax :
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.

Example :
Explanation:

In this example, a Promise object is created that takes two functions: resolve()
and reject(). resolve() is used if the process is successful and reject() is used
when an error occurs in the promise. The promise is resolved if the value of
count is true.
Promise Chaining :

Promises are useful when you have to handle more than one asynchronous
task, one after another. For that, we use promise chaining. You can perform an
operation after a promise is resolved using methods then(), catch() and
finally().
then( ) Method :
The then() method is used with the callback when the promise is
successfully fulfilled or resolved.

Example :
Explanation:

In this example, the then() method is used to chain the functions to the
promise. The then() method is called when the promise is resolved successfully.
We can chain multiple then() methods with the promise.
catch( ) Method :
The catch() method is used with the callback when the promise is
rejected or if an error occurs.

Example :
Explanation:

In this example, the promise is rejected. And the catch() method is used with a
promise to handle the error.
finally( ) Method :
The finally() method gets executed when the promise is either resolved
successfully or rejected.

Example :
Explanation:

In this example, the promise is resolved. And the finally() method is used with a
promise to handle the error.
async Keyword :
The async keyword is used with a function to represent that the function is an
asynchronous function. The async function returns a promise.

Example :

Explanation:
The async keyword is used before the function to
represent that the function is asynchronous.
await Keyword :
The await keyword is used inside the async function to wait for the
asynchronous operation. The use of await pauses the async function until the
promise returns a result (resolve or reject) value.

Example :
Explanation:

In this example, a Promise object is created and it gets resolved after 4000
milliseconds. Here, the asyncFunc() function is written using the async function.
The await keyword waits for the promise to be complete (resolve or reject).
Hence, hello is displayed only after promise value is available to the result
variable. If await is not used, hello is displayed before Promise resolved.

You might also like