Xử lý đồng bộ trong Javascript

NODEJS Xử lý bất đồng bộ – Bài 1: Từ khóa let và arrow function ES6

Xử lý bất đồng bộ trong Javascript với Promise và Async – Await Khóa học Lập trình NodeJS tại KhoaPham.Vn: http://khoapham.vn/khoa-hoc-lap-trinh-nodejs.html

Như các bạn đã biết, chúng ta có nhiều cách để xử lý các thao tác bất đồng bộ trong javascript, trong đó, cách quen thuộc nhất chính là callback function.

Tuy nhiên, sử dụng callback fucntion sẽ tạo ra một bất lợi lớn, đặc biệt là khi chúng ta có quá nhiều tác vụ bất đồng bộ cần thực hiện liên tiếp nhau (tác vụ trước là tham số của tác vụ sau).

Trường hợp đó gọi là callback hell – chỉ 1 đoạn các callback function lồng nhau, gây khó khăn lớn cho việc debug.

May mắn là trong ES6 và các phiên bản mới hơn, Javascript đã cung cấp cho chúng ta một số cách để giải quyết vấn đề này, trong loạt bài này, mình và các bạn sẽ cùng nhau tìm hiểu 2 trong số các cách đó, đó chính là Promise và Async – Await.

Tư vấn ghi danh: 0942764080 Hỗ trợ kỹ thuật: 0967908907 Fanpage: https://www.facebook.com/khoapham.vn/

Các video

• 1 - Lập trình Nodejs: Xử lý bất đồng bộ trong Javascript với Promise và Async – Await Free

• 2 - NODEJS Xử lý bất đồng bộ – Bài 1: Từ khóa let và arrow function ES6 Free

• 3 - NODEJS Xử lý bất đồng bộ – Bài 2: Ôn tập function trong javascript Free

• 4 - NODEJS Xử lý bất đồng bộ – Bài 3: Ôn tập Bất đồng bộ trong javascript Free

• 5 - NODEJS Xử lý bất đồng bộ – Bài 4: Callback function Free

• 6 - NODEJS Xử lý bất đồng bộ – Bài 5: Ví dụ về callback hell Free

• 7 - NODEJS Xử lý bất đồng bộ – Bài 6: Promise cơ bản Free

• 8 - NODEJS Xử lý bất đồng bộ – Bài 7: Tái sử dụng promise Free

• 9 - NODEJS Xử lý bất đồng bộ – Bài 8: Promise liên tiếp Free

• 10 - NODEJS Xử lý bất đồng bộ – Bài 9: Promise status và Promise value Free

• 11 - NODEJS Xử lý bất đồng bộ – Bài 10: Phương thức resolve và reject Free

• 12 - NODEJS Xử lý bất đồng bộ – Bài 11: Phương thức all và race Free

• 13 - NODEJS Xử lý bất đồng bộ – Bài 12: Sử dụng Babel CLI Free

• 14 - NODEJS Xử lý bất đồng bộ – Bài 13: Làm quen với async – await Free

• 15 - NODEJS Xử lý bất đồng bộ – Bài 14: Sử dụng await liên tiếp Free

• 16 - NODEJS Xử lý bất đồng bộ – Bài 15: Async function trả về promise Free

Thông tin giảng viên

Bình Luận

(Bạn vui lòng đăng nhập để thêm bình luận)

Khóa học tương tự

Dẫn nhập

Trong bài viết hôm nay, Kteam sẽ giải thích Cơ chế bất đồng bộ trong Javascript.

Nội dung

Để theo dõi bài này tốt nhất, bạn nên xem qua bài:

• ECMAScript là gì?
• Node.js là gì?

Bài này sẽ giới thiệu những nội dung sau:

• Bất đồng bộ là gì?
• Cơ chế hoạt động của Javascript

Bất đồng bộ là gì?

Đầu tiên ta sẽ tìm hiểu lại xử lý đồng bộ (Synchronous) là gì? Nếu như ta đã hiểu lập trình cơ bản thì chắc chắn biết là khi khi dòng code hoàn thành thì mới chạy dòng code tiếp theo, nếu dòng code đang thực hiện quá lâu thì chương trình đang ở trạng thái chờ.

Trái với ý tưởng đồng bộ phải chờ dòng code thực hiện xong, bất đồng bộ (Asynchronous) có thể bỏ qua trạng thái chờ nếu không cần thiết và thực hiện các dòng code tiếp theo. Ví dụ như sau: Bạn vừa có tin nhắn, bạn sẽ gửi lại tin cho bạn mình, có thể bạn của bạn chưa phản hồi ngay lập tức, bạn không cần phải chờ đợi người ta mà có thể làm việc khác như lướt news feed hay nhắn tin cho người khác,... khi nào có tin rep lại thì xử lý tiếp.

Mặt tốt của bất đồng bộ là giúp chúng ta xử lý nhiều công việc xen kẽ với nhau để tiết kiệm thời gian. Mặt xấu là làm chương trình mình viết phức tạp lên, và ta phải hiểu rõ nguyên lý hoạt động của bất đồng bộ, nếu không sẽ dính những trường hợp như cái tiền đề chưa làm mà đã xử lý cái kết quả.

Cơ chế hoạt động của Javascript

Đầu tiên, Kteam sẽ giới thiệu qua những thành phần sau được xử lý phía dưới Javascript:

• Call Stack: Vùng nhớ đặc biệt trên chip máy tính nhằm để phục vụ thực thi các dòng lệnh (cụ thể ở đây là các hàm). Stack là hàng đợi theo kiểu LIFO (Last In First Out) nghĩa là cái gì vào cuối thì ra đầu.
• Heap: vùng nhớ dùng để chứa kết quả tạm thời để thực thi các hàm trong stack.
• Callback Queue / Message Queue: khi các dòng lệnh cần thời gian chờ, ta sẽ khai báo các function callback xử lý sau khi dòng lệnh đó đã hoàn thành. Thì các task đó sẽ được đẩy vào đây. Queue là hàng đợi theo kiểu FIFO (First In First Out) có nghĩa cái gì vào trước là xử lý trước.
• Event Loop: có thể giải thích đơn giản là nó là một vòng lặp vô tận, và chỉ 1 công việc duy nhất là lấy các task từ Call Stack hoặc Callback Queue. Đầu tiên sẽ xử lý CallStack trước, sau khi Call Stack trống thì nó sẽ kiểm tra Callback Queue để thực hiện.

Ví dụ 1: thực hiện code Javascript đồng bộ

function bar() {

    console.log('bar')

}


function baz() {

    console.log('baz')

}


function foo() {

  console.log('foo')

  bar()

  baz()

}


foo()

• Giải thích: theo cơ chế call stack, hàm vào sau thì sẽ thực hiện trước. Khi gọi hàm foo, nó sẽ kiểm tra các hàm nằm trong nó, nếu có thì đưa hàm con vào trong stack rồi thực hiện rồi lại quay lại thực hiện hàm phía dưới. Bạn có thể xem ảnh gif để dễ hình dung hơn.

• Nhận xét: Bởi vì Javascript chỉ thực thi single-thread, nói đơn giản là mỗi lần chỉ thực thi được 1 dòng code, nên khi đang xử lý thì chương trình tạm thời block lại, có nghĩa là không thể thao tác được trên web khi đang block. Nếu thời gian block tính theo mili giây thì so với thao tác người dùng không đáng kể. Nhưng nếu thời gian block lên đến từng giây, lúc đó làm người dùng hiểu lầm trang web đang bị treo (lag), lúc đó ta cần phải sử dụng CallBack Queue để tránh hiện tượng này.

Ví dụ 2: thực hiện code Javascript bất đồng bộ

function bar() {

    console.log('bar')

}


function baz() {

    console.log('baz')

}


function foo() {

  setTimeout(function callback() {

    console.log('foo')

  }, 2000)

  bar()

  baz()

}


foo()

• Giải thích: Kteam sẽ sử dụng hàm setTimeout để có thể tạo ra 1 hàm callback, hàm setTimeout sẽ báo trình duyệt chờ sau 2 giây thì chạy hàm callback. Thì sau khi hẹn giờ, Javascript vẫn tiếp tục thực hiện các hàm tiếp theo như thường. Sau 2 giây thì hàm callback sẽ được đẩy vào Callback Queue. Khi Event Loop kiểm tra Call Stack không còn hàm để xử lý, nó sẽ kiểm tra bên Callback Queue xem có hàm nào để xử lý không, có thì đẩy qua Call Stack để thực hiện.

Kết

Như vậy Kteam đã giới thiệu về cơ chế bất đồng bộ trong Javascript

Ở bài tiếp theo, Kteam sẽ giới thiệu cho các bạn Node.js hoạt động như thế nào

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.