Understanding asynchronous process on website

Bagaimana proses asynchronous pada javascript
bekerja
31 Oktober 2020
Understanding asynchronous
process on website

Rizal A. Pambudi
Join date
Virtual Product
20 Jan 2018
ABOUT ME
I’m software engineer who focuses on the frontend screen. I’m currently part of
Bukalapak engineering team. Find me on internet with @rizalasrul. I also have a
website in rizalasrul.com.
BEFORE BUKALAPAK
PT. Ultrajaya Milk Industry - 2017
IT Developer
Position Frontend Engineer
Graduated from PENS - 2016
Bachelor of Applied Science.
D4 Teknik Informatika - PENS
Undergraduate Student
PT. Ultrajaya Milk Industry - 2016
IT Support
PT. Reendoo Proﬁta Nusantara
Web developer
Division

Perangkat lunak yang dibutuhkan
01. Code editor (Sublime, VisualStudio Code, Notepad++)
02. Browser (Chrome, Firefox, Safari)
03. Web server (XAMPP, NPM live-server) *
04. Chrome dev tools
05. JS online editor (https://js.do/)

Apa yang akan
kita bahas?
Async javascript
“
“
Pengenalan01
02 HTTP Request
03 Status Codes
04 Callback Function
05 Using JSON Data
06 Callback Hell
07 Promises
08 Chaining Promise
09 Fetch API
10 Async & Await

01. Basic syntax HTML & javascript
02. Website development
03. API development
04. Third-party library (jQuery, axios)
Apa yang tidak akan kita bahas?

Apa itu asynchronous?
Sebelum ke sana, mari kita cari tahu apa itu
synchronous

Apa itu synchronous?
● Program dalam javascript secara default akan dieksekusi baris per baris.
● Secara default, proses di javascript akan dieksekusi secara synchronous.
● Proses synchronous juga bisa disebut blocking, karena harus menunggu tiap proses
selesai, baru proses selanjutnya berjalan.
console.log(‘Pernyataan 1’);

Contoh
synchronous
Main
Thread
Pernyataan 1
Program dijalankan pada
thread utama.
Secara default, program
javascript akan dieksekusi
secara berurutan.
Pernyataan 2
Pernyataan 3
Pernyataan 4
Main
Thread

Contoh
synchronous
Main
Thread
Pernyataan 1
Pernyataan 2
Pernyataan 3
Pernyataan 4
Main
Thread
Database
Butuh waktu

Contoh
synchronous
Main
Thread
Pernyataan 1
Pernyataan 2
Pernyataan 3
Pernyataan 4
Main
Thread
Database
Butuh waktu
Files
Butuh waktu
Async to the rescue!

Apa itu
asynchronous?
● Walaupun secara default proses javascript adalah
synchronous, namun kita bisa membuatnya menjadi
asynchronous.
● Pada proses asynchronous, javascript tidak akan
menunggu proses sebelumnya selesai.
● Proses asynchronous juga biasa disebut non-blocking.
“Start now, and ﬁnish it later!”

Contoh
asynchronous
Main
Thread
Pernyataan 1
Pernyataan 2
Pernyataan 3
Pernyataan 4
Database
Butuh waktu
Callback
Start now, ﬁnish later
Async Process

Contoh kode
asynchronous
setTimeout(function() {
console.log(‘Callback function berjalan’);
}, 2000);
setTimeout(function, milliseconds)
Memanggil fungsi atau mengevaluasi ekspresi setelah sejumlah milidetik.

HTTP request
Bagaimana cara membuat request ke jaringan

Penerapan HTTP
Request
● HTTP request digunakan untuk mengambil data dari
server lain.
● Kita membuat request melalui API endpoints.

API endpoints
Contoh: https://api.bukalapak.com/products/3m3opp7
Product detail page
some other
server
HTTP request
Response (data)

Fake API endpoint
Kita akan menggunakan
https://jsonplaceholder.typicode.com untuk melakukan
HTTP request

Contoh kode HTTP
request
const request = new XMLHttpRequest();
request.open('GET', 'https://jsonplaceholder.typicode.com/todos');
request.send();
XMLHttpRequest
Built-in class pada javascript yang digunakan untuk melakukan HTTP request.
https://jsonplaceholder.typicode.com/todos

Melacak response data
dari HTTP request
request.addEventListener('readystatechange', function() {
console.log(request, request.readyState);
});
request.send();
addEventListener
Menambahkan sebuah listener kepada event yang tersedia.
Melacak progres dari HTTP request
menggunakan event listener dan spesiﬁk event
yang bernama readystatechange.

Value State Description
0 UNSENT Client (website) baru saja terbuat. Fungsi open() belum dijalankan.
1 OPENED Fungsi open() baru saja dijalankan.
2 HEADERS_RECEIVED Fungsi send() baru saja dijalankan.
3 LOADING Sedang proses mengunduh data dari server.
4 DONE Client telah menerima data dari server. Proses selesai.
XMLHttpRequest.readyState
Kode status pada HTTP request

Menangkap response
ketika state DONE
if (request.readyState === 4) {
console.log(request.responseText);
}
});
request.send();
Menampilkan response data ketika state
bernilai DONE.

Status codes
Additional Notes Here

Mari kita cermati kode
di tahap sebelumnya
● responseText hanya ditampilkan
ketika proses HTTP request
selesai, yang digambarkan
dengan readyState bernilai 4.
request.addEventListener('readystatechange', () => {
}
});
request.send();
request.addEventListener('readystatechange', () => {
}
});
request.open('GET', 'https://jsonplaceholder.typicode.com/todosssss');
request.send();
● Bagaimana jika API endpoint
yang kita akses tidak valid?
Sengaja dibikin salah supaya kita
tahu bagaimana behaviournya

Menangkap response ketika
state DONE dan status code
bernilai 200
if (request.readyState === 4 && request.status === 200) {
}
});
request.send();
Menambah kondisi ketika
status code bernilai 200

Code Description
1xx Response informasi.
2xx Response berhasil.
3xx Redirect.
4xx Error terjadi di sisi client.
5xx Error terjadi di sisi server.
HTTP response status codes
Untuk lebih jelas,
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

Menampilkan pesan error
ketika request bermasalah
} else if (request.readyState === 4) {
console.log(‘Terjadi error ketika request’);
}
});
request.send();

Callback function
Additional Notes Here

Apa itu callback?
● Callback merupakan mekanisme untuk memanggil kembali kode yang ada di
program dari proses async.
● Callback biasanya dibuat dalam bentuk function.
● Dengan menggunakan callback function, program bisa menerima informasi yang
dibutuhkan ketika proses async berhasil dieksekusi.
setTimeout(function() {
console.log(‘Callback function berjalan’);
}, 2000);
Contoh callback function.

Cara membuat callback
function sederhana
console.log(‘Terjadi error ketika request’);
}
});
request.send();
● Preview kode sebelumnya.

function sederhana
const getTodo = function() {
console.log('Terjadi error ketika request');
}
});
request.send();
};
getTodo();
● Preview kode sebelumnya
● Bungkus kode dengan function.

function sederhana
const getTodo = function(callback) {
callback();
callback();
}
});
request.send();
};
getTodo(function() {
console.log('Fungsi callback dijalankan');
});
● Preview kode sebelumnya
● Bungkus kode dengan function.
● Menambahkan parameter bertipe function yang akan dijalankan ketika request
berhasil atau gagal.

Membuat pembeda pada callback function
ketika request berhasil atau gagal
callback(undefined, request.responseText);
callback('HTTP request error', undefined);
}
});
request.send();
};
getTodo(function(err, data) {
if (err) console.log(err);
else console.log(data);
});

Fungsi getTodo tidak
blocking kode lain
...
...
...
console.log('Pernyataan 1');
});
console.log(‘Pernyataan 3');

Using JSON data
Memahami data berformat JSON

● JSON singkatan dari Javascript Object Notation.
● JSON adalah tipe data object pada Javascript.
● https://www.json.org.
Apa itu JSON?
{
"first_name": "Rizal",
"last_name": "Asrul Pambudi",
“age”: 26,
"address": {
"city": "Depok",
"country": "Indonesia"
},
“hobbies”: [“running”, “archery”, “flying”],
"url": "https://rizalasrul.com"
}

● JSON sangat populer digunakan dalam pembuatan RESTful API saat ini,
● Data JSON sangat mudah dibuat dan dimengerti oleh manusia.
● Tidak hanya di javascript, JSON mudah dibuat di hampir semua bahasa
pemrograman.
● JSON sangat ringan.
Mengapa menggunakan
JSON?
{
"first_name": "Rizal",
"last_name": "Asrul Pambudi",
“age”: 26,
"address": {
"city": "Depok",
"country": "Indonesia"
},
“hobbies”: [“running”, “archery”, “flying”],
"url": "https://rizalasrul.com"
}

Mari kita cermati kode di tahap
sebelumnya
callback(undefined, request.responseText);
}
});
request.send();
};
});
JSON.parse
Mengubah string JSON menjadi data object javascript

Mari kita cermati kode di tahap
sebelumnya
const data = JSON.parse(request.responseText);
callback(undefined, data);
}
});
request.send();
};
});
JSON.parse
Mengubah string JSON menjadi data object javascript

Callback hell
Bagaimana cara kita menangani lebih dari satu HTTP
request?

Kode kita hanya bisa
menangani satu HTTP
request
● Di dunia nyata, bisa jadi kita
membutuhkan lebih dari satu
HTTP request.
● Bisa jadi antar request saling
membutuhkan satu sama lain
(chaining request).
● Oleh karena itu kita perlu
memperbaiki kode kita saat ini.
}
});
request.send();
};
});
API endpoint ini hardcoded

Menambahkan parameter untuk
melewatkan API endpoint
const getTodo = function(endpoint, callback) {
}
});
request.open('GET', endpoint);
request.send();
};
const endpoint = 'https://jsonplaceholder.typicode.com/todos';
getTodo(endpoint, function(err, data) {
});
Menjadikan API endpoint sebagai parameter
parameter
parameter

Melakukan request
untuk satu endpoint
...
...
...
getTodo(endpoint, function(err, data) {
});

Melakukan request untuk dua
endpoint
...
...
...
const endpointOne = 'https://jsonplaceholder.typicode.com/todos';
const endpointTwo = 'https://jsonplaceholder.typicode.com/users';
getTodo(endpointOne, function(err, data) {
});
getTodo(endpointTwo, function(err, data) {
});
● https://jsonplaceholder.typicode.com/todos
● https://jsonplaceholder.typicode.com/users

endpoint bersifat chaining request
...
...
...
});
});

...
...
...
console.log(data);
console.log(data);
});
});

Melakukan request untuk tiga
...
...
...
const endpointThree = 'https://jsonplaceholder.typicode.com/posts';
console.log(data);
console.log(data);
getTodo(endpointThree, function(err, data) {
console.log(data);
});
});
});
● https://jsonplaceholder.typicode.com/posts

Melakukan request untuk banyak
...
...
...
console.log(data);
console.log(data);
console.log(data);
getTodo(endpointFour, function(err, data) {
console.log(data);
getTodo(endpointFive, function(err, data) {
console.log(data);
getTodo(endpointSix, function(err, data) {
console.log(data);
});
});
});
});
});
});
CALLBACK HELL!!!

Callback hell?
● Callback hell, atau callback yang bersarang,
adalah efek samping yang dihasilkan ketika
kita memiliki banyak callback function.
● Efek samping tersebut berupa indentasi
yang semakin dalam, sehingga
mengakibatkan kode kita tidak rapi.
● Kode yang tidak rapi akan menjadi sesuatu
yang susah dirawat.
Promise to the rescue!

Promise
Mengapa kita butuh mengimplementasi promise?

Apa itu promise?
● Promise merupakan proxy untuk sebuah nilai di masa depan (future) yang belum
diketahui saat ini.
● Promise biasa digunakan sebagai proxy untuk proses asynchronous.
● Penggunaan promise cukup mudah, dan lebih mirip dengan kode synchronous.
const promise = new Promise(function(resolve, reject) {
if (success) {
resolve(value);
}
else {
reject(error);
}
});

Function dengan return
promise
● Fungsi getSomething akan dijalankan dengan keyword .then().
● Fungsi yang ada di dalam .then() akan dieksekusi ketika fungsi resolve pada promise
dijalankan, yang mana berarti request kita berhasil.
const getSomething = function() {
return new Promise(function(resolve, reject) {
resolve('Data berhasil');
});
};
getSomething()
.then(function(data) {
console.log(data);
});

Function dengan return
promise
● Fungsi getSomething akan dijalankan dengan keyword .then().
● Fungsi yang ada di dalam .then() akan dieksekusi ketika fungsi resolve pada promise
dijalankan, yang mana berarti request kita berhasil.
● Fungsi getSomething juga akan dijalankan dengan keyword .catch().
● Fungsi yang ada di dalam .catch() akan dieksekusi ketika fungsi reject pada promise
dijalankan, yang mana berarti request kita gagal.
const getSomething = function() {
reject('Pesan error');
});
};
getSomething()
.catch(function(data) {
console.log(data);
});

Implementasi dengan
kode sebelumnya
const getTodo = function(endpoint) {
resolve(data);
reject('HTTP request error');
}
});
request.open('GET', endpoint);
request.send();
});
};
1. Melakukan refactor terhadap function getTodo supaya mengembalikan nilai promise.

Implementasi dengan
kode sebelumnya
...
...
...
getTodo(endpoint)
console.log(data);
})
.catch(function(error) {
console.log(error);
});
1. Melakukan refactor terhadap function getTodo supaya mengembalikan nilai promise.
2. Mengubah pemanggilan function getTodo diikuti dengan .then dan .catch.

Chaining promise
Menghindari callback hell menggunakan promise

Chaining promise
Salah satu hal terbaik dari promise adalah kita bisa mengikatnya satu sama
lain. Hal itu menjadikan kode yang kita tulis menjadi lebih rapi.

Kode chaining request
sebelumnya
...
...
...
console.log(data);
console.log(data);
console.log(data);
});
});
});

Kode chaining request
setelah menggunakan
promise
...
...
...
getTodo(endpointOne)
console.log('Promise 1 berhasil: ', data);
return getTodo(endpointTwo);
})
return getTodo(endpointThree);
})
})
console.log('Promise gagal: ', error);
});

Fetch API
Fitur alternatif ketika melakukan HTTP request

Apa itu fetch API?
● Fetch API adalah fungsi alami terbaru dari javascript yang dapat kita gunakan untuk
HTTP request.
● Salah satu hal yang menarik dari fetch API adalah sudah mengimplementasi promise
secara otomatis.
● https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
fetch('https://jsonplaceholder.typicode.com/todos')
.then(function(response) {
console.log('Berhasil: ', response);
})
console.log('Gagal: ', error);
});

Parsing data berupa
object menggunakan
fetch
fetch('https://jsonplaceholder.typicode.com/todos')
return response.json();
})
console.log('Data: ', data);
})
});
Parsing data menggunakan
method bawaan .json.
Hasil dari parsing akan ditampilkan
di blok .then di bawahnya

Chaining request
menggunakan fetch API
Menggunakan fetch API dapat
menghindari callback hell. Tetapi
apakah kode disamping bisa dibikin
lebih rapi lagi?
fetch(endpointOne)
})
return fetch(endpointTwo);
})
})
return fetch(endpointThree);
})
})
})
});

Async & await
Menulis sintaks asynchronous dengan gaya
synchronous

Apa itu async & await?
● Fitur baru JS yang digunakan untuk mempermudah penulisan sintaks kode promise.
● Dengan menggunakan async & await, kita bisa menulis kode asynchronous dengan
gaya synchronous.
● Async menandakan bahwa function tersebut bersifat asynchronous dan
mengembalikan nilai promise.
● Await digunakan untuk mendapatkan nilai hasil dari function yang mengembalikan
promise.
const getTodo = async function() {
const response = await fetch('https://jsonplaceholder.typicode.com/todos');
const data = await response.json();
console.log(data);
};
getTodo();

Error handling di async
& await
Menggunakan blok try - catch
try {
const response = await fetch('https://jsdonplaceholder.typicode.com/todos');
const data = await response.json();
console.log(data);
}
catch (e) {
console.log(e);
}
};
getTodo();

Chaining request
menggunakan async &
await
try {
const responseOne = await fetch('https://jsonplaceholder.typicode.com/todos');
const dataOne = await responseOne.json();
const responseTwo = await fetch('https://jsonplaceholder.typicode.com/users');
const dataTwo = await responseTwo.json();
const responseThree = await fetch('https://jsonplaceholder.typicode.com/posts');
const dataThree = await responseThree.json();
console.log(dataOne, dataTwo, dataThree);
}
catch (e) {
console.log(e);
}
};
getTodo();
Menjadi lebih rapi dan mudah dibaca
bukan?

Selanjutnya belajar apa?
01. Metode HTTP request lain (POST, PUT, PATCH)
02. Async library (axios, jQuery AJAX)
03. Web socket
04. Memperdalam tentang non-blocking

Let’s
Discussion
Together!
Please send your further question to
rizal.asrul@bukalapak.com
Or ping me in telegram
@rizalasrul

Understanding asynchronous process on website

Recommended

Recommended

More Related Content

Similar to Understanding asynchronous process on website

Similar to Understanding asynchronous process on website (20)

Understanding asynchronous process on website