Scribd
Upload
2 views19 pages

Async Communication

Uploaded by

hitendar.s
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views19 pages

Async Communication

Uploaded by

hitendar.s
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

Asynchronous

Communication
Sandeep G
Who Am I?

- Engineer / Front End developer


- Worked in Software AG, MSFT, SAP
- ~9 years of experience
- Worked in React JS, TypeScript, JS, CSS, HTML
Agenda

● Concurrency in Javascript
● CallBack Function in Javascript
● Callback Hell or Pyramid of Doom
● Promises in Javascript

● Creating a Promise
● then () & Catch() method in Javascript
● Chaining multiple promises
● Promise methods in Javascript
● Async/Await keywords in Javascript
Concurrency In JS
Concurrency in JavaScript

● JS runs in a single thread. That is one-task-at-a-time.


● JS code is parsed sequentially.
● Asynchronous means to do something in parallel -
○ E.g. cleaning house while listening to music.
Callbacks in JS

● A function can be passed as params to another function.


● This is still concurrent, as things are sequential
Higher Order function

● A function which can accept function as parameter is called higher order function.

HOC
Async Callback

● Asynchronous means, while function is executing, JS executes another function in


parallel.

Download will execute after process!


Async Callback

How to solve it - Using callback:


Callback Hell

● Nesting many
asynchronous functions
inside callbacks is known
as the pyramid of doom or
the callback hell.

● Promise will save the day!!!


Promise in rescue!
Promise in JS - Theory
● Promises are objects that represent the eventual outcome of an asynchronous
operation.
● It contains 3 states -
○ Pending: initial state
○ Fulfilled/success: async operation executed successfully.
○ Rejected: operation has failed.
Create Promise

● Promise can be created using the new Promise().


Consuming Promise

● Promise can be used with .then() method


● .then() method accepts 2 functions -
1. Success callback - this would be called by the promise, when all is well!
2. Fail callback - this would be called by the promise, when all is not well.
Catch Method

● This can be used to consume the rejected promise.


Chaining Promises ~ Function composition

Process of chaining promises is called composition, such that


After consuming a promise we are returning a promise.
Promise ALL

● It is being used when you have multiple independent promises and you want to
execute at once.
Async Await in JS

● Cleaner way to write async function, when you don;t wish to use promises.
● Use catch block to handle errors.
Happy Coding

You might also like