Home / Tutorial / Javascript / Bất đồng bộ trong Javascript – Asynchronous

Bất đồng bộ trong Javascript – Asynchronous

Đồng bộ và Bất đồng bộ (Synchronous – Asynchronous) là 2 khái niệm gây khó khăn cho người mới tiếp cận Javascript (Trong đó có cả mình hồi 6 tháng trước 😁). Hiểu nôm na Đồng bộ là code chạy có tuần tự từ trên xuống dưới – từ trái qua phải, còn Bất đồng bộ thì không! Bài viết này mình tập trung giải quyết vấn đề Bất đồng bộ vì nó gây khó khăn trong quá trình phát triển.

Phần 2: Promise nâng cao

Phần 3: Async – Await

Đầu tiên chúng ta đi đến ví dụ sau để có cái nhìn khác biệt giữa Đồng bộBất đồng bộ:

Kết quả log ra “Gâu Gâu” rồi đến “Meo Meo”. Tiếp đến ví dụ sau:

Kết quả log ra “Meo Meo” rồi đến “Gâu Gâu”. Trông 2 ví dụ trên vẫn chưa có điều bất thường xảy ra. Ok vậy chúng ta qua ví dụ tiếp.

Quái nhỉ, rõ ràng đã setTimeout giá trị là 0 mà vẫn log ra “Meo Meo” trước 🤔

Giải thích ví dụ trên: hàm setTimeout là một hàm Bất đồng bộ trong Javascript – chạy không tuần tự và bị cho vào hàng chờ, đợi cho các đoạn code tuần tự chạy xong thì nó mới được chạy tiếp (Nên Meo Meo mới được log ra trước ở ví dụ trên).

event-loop

Không chỉ hàm setTimeout mà khi ta sử dụng Ajax tương tác với API cũng là một dạng Bất đồng bộ vì nó mất 1 thời gian nhất định để có thể tương tác.

Trước lúc ES6 ra đời thì các lập trình viên phải sử dụng callback để xử lý Bất đồng bộ thành Đồng bộ và kết quả nó như này…

callback hell

Thôi code như này về quê chăn vịt chăn bò cho lành 😂. May thay ES6 ra đời và cho chúng ta có thêm khái niệm về Promise. Hãy thử nó qua ví dụ sau:

Kết quả ra đúng như mong muốn “Gâu gâu” đến “Meo meo” 😁. Trích nguyên văn của MDN:

Promise là một đối tượng đặc biệt dùng cho các xử lý bất đồng bộ. Nó đại diện cho một xử lý bất đồng bộ và chứa kết quả cũng như các lỗi xảy ra từ xử lý bất đồng bộ đó.

Cú pháp của Promise có dạng như sau:

Bây giờ chúng ta sẽ đến với một ví dụ thực tế (ở đây mình có sử dụng NodeJS để test API)

Các bạn có thể kiểm tra kết quả trên ở đây: https://repl.it/@chungnq/Promise-basic-example

Ủa vậy trông nó khác gì callback ???

Khi mới tìm hiểu mình cũng đặt ra câu hỏi tương tự, nhưng đi sâu vào phân tích thì nó có 2 ưu điểm sau:

1. Hỗ trợ Chaining

2. Hỗ trợ bắt lỗi tốt hơn.

1. Promise hỗ trợ Chaining

Khi lồng nhiều điều kiện Bất đồng bộ với nhau thì cú pháp nó sẽ như này:

2. Xử lý lỗi:

Chỉ cần 1 trong 3 hàm then kia lỗi, ngay lập tức chạy vào hàm catch để chúng ta bắt lỗi và xử lý.

Tổng kết:

Bài viết tạm thời đến đây vì nó khá nặng về kĩ thuật, nuốt khó trôi. Mình sẽ ra tiếp các bài sau đi vào chi tiết hơn và nâng cao về Promise, Async – Await trong ES7. Cảm ơn các bạn đã quan tâm và nếu có câu hỏi hay đóng góp gì hãy comment ở dưới và mình sẽ phản hồi lại nhanh nhất có thể 😁.

About Chung Chích Choè

Rất ham chơi và hơi chém gió. Mong muốn chia sẻ, đóng góp cho ngành công nghệ thông tin nước nhà. Đồng thời mong muốn xây dựng và phát triển một cộng đồng yêu thích công nghệ thông tin để lại được ngồi cùng nhau chém gió :D.

Check Also

1409261660001

Trở thành một full-stack developer?

Bất kì ai trong ngành lập trình – phát triển web ngày nay đều có ...

top-5-Front-end-frameworks-infographic-1

5 frontend framework phổ biến nhất cho lập trình web năm 2015

Nếu ví 1 website như một bức tranh thì html như khung tranh và những ...

Leave a Reply

Your email address will not be published. Required fields are marked *