Series : [Asynchronous programing - Javascript] - Bài 2 : Giới thiệu về asynchronous Javascript

1. Asynchronous Javascript

Thực tế : fetch 1 file, access đến DB và trả về kết quả, access 1 video stream từ webcam, hoặc broadcast màn hình hiển thị đến 1 VR headset, .... Lấy 1 ví dụ thực tế tại sao với những tình huống này, khó sử dụng synchronous Javascript (Javascript đồng bộ)

let response = fetch('myImage.png'); (1) - asynchronous fetching 
let blob = response.blob(); (2) - hiển thị image blob trên UI

Nếu (2) được chạy khi response từ (1) chưa có thì lỗi --> Cách dễ nhất là khắc phục bằng asynchronous Javascript Có 2 style viết asynchronous code

• Old-style callbacks
• Promise-style code

2. Async callbacks

Async callbacks là các function được chỉ định như là argument gọi đến 1 function khác (function lồng function). Khi chạy xong, có lời gọi trả về success hay fail. Mọi người đang dần thay thế callback bằng promise, nhưng callback vẫn khá phổ biến ở thời điểm hiện tại.

btn.addEventListener ('click', () => {
    alert ('Clicked!');
    
let pElem = document.createElement('p');
pElem.textContent = 'This is a newly-added paragraph';
document.body.appendChild(pElem);
});

Tham số đầu tiên là loại event được listen, tham số thứ 2 là callback function khi event được trigger

VD :

function loadAsset(url, type, callback) {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.responseType = type;
    
    xhr.onload = function () {
        callback(xhr.response);
    };
    
    xhr.send();
}

function displayImage(blob) {
    let objectURL = URL.createObjectURL(blob);
    let image = document.createElement('img');
    image.src = objectURL;
    document.body.appendChild(image);
}

loadAsset('coffee.jpg', 'blob', displayImage);

3. Promises

Promise là 1 modern, efficient version của XMLHttpRequest. Promise là 1 object biểu diễn cho success/ failure của 1 async operation.

VD :

fetch('products.json').then(function(response) {
    return response.json();
}).then (function(json) {
    let products = json;
    initialize(products);
}).catch(function(err) {
    console.log('Fetch problem: ' + err.message);
});

4. So sánh promise và callback

Promises có 1 số điểm giống với callback. Chúng trả về 1 object, từ đó chúng ta attach callback function, thay vì truyền callback vào 1 function. Tuy nhiên, có 1 số điểm lợi hơn

• Có thể chain nhiều async operation sử dụng nhiều .then() operations, truyền kết quả của 1 operation này đến operation khác. Nếu thay thế bằng callback thì sẽ phải lồng function trong function, khá là khó nhìn
• Dễ xử lý lỗi hơn- tất cả các error đều được xử lý bằng chỉ 1 .catch() block tại cuối block, hơn là phải xử lý nhiều lần

5. Ví dụ về việc sử dụng asynchrous code thuần

Chúng ta cùng tìm hiểu về 1 ví dụ minh hoạ về async code, và vấn đề khi chúng ta không nhận thức đầy đủ về code execution order.

console.log('Starting');
let image;

fetch('coffee.jpg').then((response) => {
  console.log('It worked!');
  return response.blob();
}).then((myBlob) => {
  let objectURL = URL.createObjectURL(myBlob);
  image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
}).catch((error) => {
  console.log('There has been a problem with your fetch operation: ' + error.message);
});

console.log('All done!');

fetch execute 1 cách bất đồng bộ mà không bị blocking, do đó in ra màn hình sẽ là

Starting 
All done!
It worked!

Chúng ta expect

Starting 
It worked!
All done!

Để fix lỗi đằng trên, chúng ta sửa như sau

console.log('Starting');
let image;

fetch('coffee.jpg').then((response) => {
  console.log('It worked!');
  return response.blob();
}).then((myBlob) => {
  let objectURL = URL.createObjectURL(myBlob);
  image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
}).then(() => {
    console.log('All done! ' + image.src);
}).catch((error) => {
  console.log('There has been a problem with your fetch operation: ' + error.message);
});

console.log('All done!');