Front-end Advances
Asynchronous JavaScript
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 1
Table of Contents
1. Asynchronous Overview
2. Event loop
3. Callback
4. Promise
5. Generator
6. async/await
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 2
Section 1
Asynchronous Overview
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 3
Asynchronous Overview
What is a thread ?
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 4
Asynchronous Overview
Synchronous model vs Asynchronous model
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 5
Asynchronous Overview
Problem: Which programming model is JavaScript
(synchronous or asynchronous ?)
• Sadly JavaScript is single-threaded: only one task can run at a
time
• How to achieve concurrency with JavaScript?
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 6
Section 2
Event Loop
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 7
Event Loop
JavaScript has a concurrency model based on an event
loop
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 8
Section 3
Callback
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 9
Callback
Function plays a big role in Event loop
Function is everywhere
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 10
Callback
How about this one?
Function again
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 11
Callback
What the difference between those 2?
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 12
Callback
What the difference between those 2?
sync callback
async callback
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 13
Callback
Recall AJAX and JSON
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 14
Callback
Recall AJAX and JSON – Usage get data from server
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 15
Callback
How to handle error?
sync callback
async callback
Easy
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 16
Callback
How to handle error? Use error 1st callback style
1st parameter
must check in every callback
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 17
Callback – Draw back
What if we want to request many resouces from server?
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 18
Callback – Draw back
Why my callback is not running ?
No guaranted that library code will call cb function
Library code
Developer code
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 19
Callback
Callback function is core mechanism behind Event Loop
There are 2 types of callback: sync and async
Callback has 3 main disadvantages:
1. There is no guaranted that callback function is called exactly 1
(unless you use built-in or well-known library)
2. Hard to handle error in async callcabk
3. Coding styling is ugly when work with multiple callback
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 20
Section 4
Promise
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 21
Promise
What is a Promise?
Promise object representing the eventual completion (fulfil) or failure
(reject) of an asynchronous operation.
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 22
Promise
How JS represent a Promise ?
Its a class parameter of constructor
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 23
Promise
Usage: represent network request with Promise
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 24
Promise
Usage: how to get the value of that network request ?
the callback function will
receive the data of
asynchronous operation
Use .then() and give it a callback function
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 25
Promise
Usage: how to handle error?
There is no todos/0
2nd parameter of .then is
used to handle error
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 26
Promise
Promise API:
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 27
Promise
Promise Usage:
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 28
Promise
Promise Usage:
chaining .then
catch all error from
previous .then()
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 29
Promise
Handle concurrent requests:
3 independent requests
use Promise.all on array of Promise
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 30
Promise
Promise advantages:
1. Callback is guaranted to executed (exactly 1)
2. Built-in error handling mechanism
3. Coding style is OK (not like callback)
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 31
Promise
Promise disadvantages:
can't resuse users
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 32
Section 5
Generator
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 33
Section 6
async/await
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 34
async/await
Promise is nice but its contructor/syntax is still too hard ? Is
there only mechanism to handle async operation ?
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 35
async/await
Syntax:
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 36
async/await
async keyword:
How to print the value inside Promise ?
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 37
async/await
async keyword:
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 38
async/await
Handle error ?
Easy, just like sync code
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 39
async/await
But can we await concurrent request ?
Not working
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 40
async/await
just wrap in Promise.all
console log
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 41
Summary
JavaScript is single-thread, synchronous programming language
Browsers add asynchronous (concurrent) model to JavaScript via
Event Loop
Functions play big role in Callback style
Promise and async/await (recommended) are created to solve the
problem of Callback
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 42
Thank you
7/5/2021 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 43