Hướng dẫn dùng asynchronize JavaScript

Đồng bộ và bất đồng bộ trong javascript mang đến cho bạn kiến thức về xử lý đồng bộ,bất động đồng bộ và các cách vận dụng trong lập trình javascript.

1. Xử lý đồng bộ (Synchronous)

Synchronous (đồng bộ / tuần tự) tức là code chương trình sẽ chạy tuần tự từ trên xuống dưới. Khi nào lệnh trên hoàn thành thì lệnh dưới mới được chạy.  Đây là cách viết code rất thường dùng.

Cái hay của nó là dễ kiểm soát quá trình xử lý. Cái hay thứ hai là dễ kiểm soát lỗi phát sinh. Còn điểm không hay của xử lý đồng bộ là gì?  Đó là do chạy theo thứ tự nên sẽ có trạng thái chờ, lệnh trên chạy quá lâu sẽ làm ảnh hướng đến các lệnh dưới.

Trong 2 ví dụ bên dưới, code chạy lần lượt từ trên xuống, lệnh trên chạy dù có lâu thì chỉ chỉ khi thực hiện xong, lệnh dưới mới chạy:

2. Xử lý bất đồng bộ (Asynchronous)

Asynchronous (bất đồng bộ/bất tuần tự): tức là code chương trình không hẳn tuần tự nữa, nhiều lệnh có thể thực hiện cùng lúc. Có khi lệnh dưới cho kết thúc và cho kết quả trước cả lệnh phía trên.

Cái hay của xử lý bất đồng bộ là gì? Đó là nó có thể tối ưu được sức mạnh của hệ thống, thứ hai giúp giảm thời gian chờ, giúp code chạy nhanh hơn.  Còn điểm không tốt của bất đồng bộ?  Không phải hệ thống nào cũng dùng bất đồng bộ được, thứ hai là khó làm quen xử lý và kiểm soát lỗi phát sinh.

Trong javascript, các hàm setTimeout, setInterval, fetch… là tiêu biểu cho các hàm xử lý bất đồng bộ trong javascript . Sau đây là mõt ví dụ xử lý bất đồng bộ:

3. Các phương án xử lý bất đồng bộ

Trong javascript có nhiều phương án xử lý bất đồng bộ : :

• Dùng hàm Callback
• Sử dụng Promise
• Dùng async/await (của es6)

B. Xử lý bất đồng bộ bằng callback

Hàm callback là một hàm được truyền vào như tham số cho 1 hàm khác. Trong Javascript bạn có thể định nghĩa mới hàm có dùng callback. Và Bạn cũng có thể dùng callback trong các hàm có sẵn đã được hỗ trợ .

1. Định nghĩa hàm mới có sử dụng callback

Bạn có thể tự tạo 1 hàm sử dụng callback bằng cách nhận tenbien ở tham số sau đó thực thi tenbien() ở nội dung của hàm.

Ví dụ 1: định nghĩa hàm xử lý chuỗi, xử lý xong thì hiện chuỗi ra.

Ví dụ 2: Viết hàm nhập điểm, sau đó gọi hàm callback để hiển thị học lực.

b. Sử dụng callback trong các function javascript

Nhiều hàm định nghĩa sẵn trong javascript đã có hỗ trợ callback. Bạn cứ việc sử dụng. Ví dụ như các hàm map, foreach, map, filter… Mời xem ví dụ:

Ví dụ 2: sử dụng filter

Ưu điểm của callback: Callback function là một cách thức phổ biến, dễ hiểu, dễ triễn khai. Nhược điểm là các callback nếu lồng nhau nhiều quá dễ dẫn đến tình trạng CallbackHell (sẽ được đề cập đến ở bài tới) – gây khó khăn khi sửa lỗi và bảo trì.

2. Callback hell

Nếu sử dụng nhiều cấp độ callback thì sẽ xảy ra tình huống nhiều hàm callback lồng nhau (callback hell)

Callback hell là trạng thái code lồng nhau nhiều cấp dẫn đến hình thành hình kim tự tháp code, nhìn rất phức tạp, khó hiểu, khó debug lỗ,i khó maintain… Mời xem ví dụ:

3. Các cách xử lý callback hell

Có nhiều cách xử lý Callback Hell, đó là:

• Đặt tên cho hàm callback : các hàm callback cố gắng đặt tên cho chúng, đừng dùng hàm vô danh (không đặt tên), khó debug.
• Thiết kế ứng dụng theo dạng module
• Sử dụng Promises (ES2015 – ES6)
• Sử dung Async/Await (ES2017 – ES8)

C. Promise trong Javascript

1. Khái niệm promise

Promise là một kỹ thuật dùng trong những lúc xử lý bất đồng bộ. Mỗi promise đại diện cho 1 tác vụ nào đó chưa hoàn thành ngay được. Ở 1 thời điếm trong tương lai, khi thực hiện xong tác vụ thì promise sẽ hàm resolve nếu thành công hoặc gọi hàm reject khi thất bại.

Bằng cách dùng Promise , bạn có thể kết hợp các hàm xử lý để sử dụng kết quả khi xử lý bất đồng bộ hoàn tất. Nhờ vậy mà việc lập trình bất đồng bộ gần giống với kiểu lập trình đồng bộ – tức là đợi xử lý bất đồng bộ xong mới thực thi các thao tác cần sử dụng kết quả của xử lý đó.

2. Cách tạo Promise

Tạo một Promise bằng cú pháp new Promise, trong tham số khai báo 2 hàm resolve và reject để gọi khi tác vụ trong promise là thành công hay thất bại.

var promise = new Promise ( function(resolve, reject) {
     //code xử lý...
     if (đánh giá thành công) {
           resolve(value1); //value1 gửi đến hàm resolve
     } else {
           reject(value2) ; //value2 gửi đến hàm reject
     }
});

3. Ví dụ tạo promise

Hai hàm trong Promise có thể đặt tên khác mà không nhất thiết phải là resolve và reject. Hàm đầu tiên (resolve) dùng để chạy khi task được đánh giá thành công nếu không thì hàm sau (reject) sẽ được gọi. Mỗi hàm chỉ được trả về 1 giá trị (mảng cũng được), nếu trả về nhiều hơn thì các giá trị sau sẽ bị bỏ qua.

4. Sử dụng promise đã tạo

Cách 1: Dùng then với 2 hàm, hàm đầu tiên được hiểu là resolve (chạy khi tác vụ trong promise OK), hàm sau được hiểu là reject (chạy khi tác vụ trong promise là fail) , hai hàm cách nhau bởi dấu phẩy.

Cách 2: dùng then và catch

5. Các trạng thái của Promise

Mỗi đối tượng promise có các trạng thái như sau:

• Pending (đang xử lý) : ): là trạng thái mà promise đã tạo ra nhưng chưa được thực thi.
• Fulfilled (resolve – đã hoàn thành) : là trạng thái mà Promise đã được thực thi và return kết quả resolve(). Khi hàm resolve được trả về – promise gọi đến lệnh .then() – để tiếp tục thực hiện logic tiếp theo.
• Rejected (đã bị từ chối): Promise đã thực thi và return kết quả reject(). Khi hàm reject được trả về – promise gọi đến lệnh .catch() – để tiếp tục thực hiện logic tiếp theo.

5. Lợi ích khi sử dụng Promise

• Tránh được Callback Hell
• Code rõ ràng, dễ đọc , dễ debug hơn

Ví dụ sau dùng callback (chứ không dùng promise) thực hiện chuyển màu màn hình sang màu red sau 5 giây, sau đó 1 giây chuyển sang blue.

Viết theo kiểu dùng callback như trên rối , khó debug. Nếu yêu cầu thêm : sau đó 3s đổi thành green, rồi sau đó 4s đổi thành pink thì bài toán lúc này rối lắm, code sẽ cực kỳ khó nuốt.

Code sau sẽ dùng promise để giải quyết yêu cầu giống như trên: đổi màu nền sang red sau 5s rồi 1s sau đổi sang blue. Tiếp 3s sau đổi sang green, rồi 4s sau đổi sang pink.

Nhờ Promise mà code bất đồng bộ được xử lý dễ hiểu hơn, có vẻ đồng bộ hơn.

Ví dụ tiếp: một ngữ cảnh khác để dùng promise: nếu điểm môn js>=9 sẽ được 1 chuyến du lịch. Để biết có được đi hay không thì phải chờ 1 khoảng thời gian đến lúc thi xong. Do đó cần tạo 1 kịch bản và các hành động có thể xảy ra sau thời gian này (tạo ra promise)

Loading...

6. Sử dụng nhiều .then() liên tiếp

Bạn có thể sử dụng nhiều then liên tiếp nhau, kết quả trả về từ .then() trên sẽ trả cho then() dưới một cách tuần tự nếu bạn dùng promise trong các then(). Ví dụ 1:

Ví dụ 2 thực hiện các công đoạn giải phương trình bậc hai gồm : nhập dữ liệu, kiểm tra, tính nghiệm , báo lỗi

ptb2 = new Promise( function(r1, r2){
    var a = prompt("Mời nhập số a");
    var b = prompt("Mời nhập số b");
    var c = prompt("Mời nhập số c");
    r1( [ a, b, c]);
});

ptb2
.then(kiemtra)
.then(tinhnghiem)
.then(xuatketqua)
.catch(thongbao)    
document.getElementById("kq").innerHTML="
Giải phương trình bậc 2
";

function kiemtra(arr){
    return new Promise(function(r1, r2){
        if (isNaN(arr[0])==true || isNaN(arr[1])==true || isNaN(arr[2])==true  ){ 
            r2("Các hệ số a ,b , c cần phải nhập số")
        }
        else if (arr[0]>10|| arr[1]>10 || arr[2]>10 ){ 
            r2("Các hệ số a ,b , c  phải <=10")
        }
        else  r1(arr);
    })
}

function tinhnghiem(arr){ //arr = [a,b,c]
    return new Promise( function(r1,r2){
       var a = arr[0] , b = arr[1] , c = arr[2]; 
       var delta = b*b - 4*a*c;
       if (delta<0) {
           r2("Phương trình vô nghiệm");
       }
       if (delta==0){
           x1 = -b/(2*a);
           x2 = -b/(2*a)
       }
       if (delta>0) {
           x1=(-b - Math.sqrt(delta))/(2*a);
           x2=(-b + Math.sqrt(delta))/(2*a);
       } 
       r1( [x1, x2]);
    })
}    

function xuatketqua(data){
    str = `
        
Nghiệm của phương trình là 
        
X1 = ${ data[0].toFixed(2) } 
        
X1 = ${ data[1].toFixed(2) } 
    `;
    document.querySelector("#kq").innerHTML = str;
}
function thongbao (str){
    document.querySelector("#kq").innerHTML = str;
}

Chuyển kiểu viết callback thành promise

Như vậy, để chuyển kiểu viết callback thành promise, Bạn thực hiện gọi chuỗi hàm bằng lệnh then, mỗi hàm trong then trả về 1 promise

promise()
.then(promise1)
.then(primise2)
.then(promise3)
.catch(funcErr )

7. Sử dụng Promise.All

Có thể thực hiện nhiều promise cùng lúc mà hoạt động của chúng độc lập nhau nhưng kết quả của những promise đó cần thiết cho 1 hoạt động sau cùng.

Hàm Promise.all với tham số truyền vào là 1 mảng các promise cần thực hiện. Khi đó, tham số của .then() chính là 1 mảng chứa các kết quả từ các promise.

Ví dụ: điểm toán được nhập sau 4s, điểm lý được nhập sau 8s, sau đó tính điểm trung bình.

D. Sử dụng async/await trong javascript

Từ khóa async

Từ async đặt trước 1 function để bật chế độ bất đồng bộ cho nó. Khi có async ở trước , hàm sẽ trả về 1 promise.

Cũng có thể tạo hàm async như sau:

Hoặc có thể dùng hàm mũi tên

Muốn lấy giá trị trả về của hàm async, bạn phải đợi promise đạr fulfilled bằng cách sử dùng lệnh then() như sau :

Từ khóa await

Từ khóa await được dùng trong các hàm đã khai báo async. Sử dụng await khi gọi các hàm trả về 1 Promise, gồm cả các hàm web API.