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