Callbacks, Promises và Async/Await trong JavaScript

Đây là nỗ lực của tôi để giải thích cách sử dụng code không đồng bộ trong Javascript ở mức rất cao.

Lưu ý: Tôi sẽ sử dụng các chức năng mũi tên trong bài đăng trên blog này. Về cơ bản, tôi sẽ thay thế các chức năng ẩn danh như vậy:

có thể được thay thế bằng:

Giả sử, bạn có một function sẽ in ra một chuỗi trong khoảng thời gian ngẫu nhiên:

Giờ hãy thử in ra các chữ A, B, C theo thứ tự:

Mở Console Chrome debug thử xem:

Callbacks, Promises và Async/Await trong JavaScript
Callbacks, Promises và Async/Await trong JavaScript

Bạn sẽ nhận thấy rằng A, B và C in theo thứ tự khác nhau và ngẫu nhiên mỗi lần bạn gọi printAll().

Điều này là do các chức năng này không đồng bộ. Mỗi hàm được thực hiện theo thứ tự, nhưng mỗi hàm độc lập với setTimeout của riêng nó. Nó khá là khó chịu, vì vậy hãy để sửa lỗi với một callback.

Callbacks

Callbacks là một chức năng được truyền cho một chức năng khác. Khi chức năng đầu tiên được thực hiện, nó sẽ chạy chức năng thứ hai.

Bạn có thể thấy đó là nó cực dễ dàng để sửa đổi chức năng ban đầu để làm việc với các callbacks.

Và giờ tiếp tục thử in ra chuỗi A, B, C lúc nãy một lần nữa:

Như bạn thấy thì bây giờ mã xấu hơn rất nhiều, nhưng ít nhất nó cũng hoạt động! Mỗi lần bạn gọi printAll, bạn sẽ nhận được kết quả tương tự.

Callbacks, Promises và Async/Await trong JavaScript
Callbacks, Promises và Async/Await trong JavaScript

Vấn đề với các cuộc gọi lại là nó tạo ra một thứ gọi là “Callback Hell.”  Về cơ bản, bạn bắt đầu lồng các hàm trong các hàm và nó bắt đầu rất khó đọc code.

Promises

Promises sẽ cố gắng khắc phục vấn đề này. Hãy để thay đổi chức năng ở trên để sử dụng Promises.

Bạn có thể thấy rằng nó vẫn trông khá giống nhau. Bạn bọc toàn bộ chức năng trong một Promise và thay vì gọi lại cuộc gọi, bạn gọi giải quyết(resolve) hoặc từ chối(reject) nếu có lỗi. Hàm trả về một đối tượng Promise.

Giờ hãy tiếp tục thử lại với ví dụ trên, hãy in các chữ cái A, B, C theo thứ tự đó:

Đây được gọi là Promise Chain. Bạn có thể thấy rằng kết quả trả về của hàm (sẽ là một Promise), và điều này được gửi đến chức năng tiếp theo.

Code không còn được lồng nhưng nó vẫn trông lộn xộn!

Bằng cách sử dụng các tính năng của các function mũi tên, chúng ta có thể loại bỏ “wrapper” của function. Code trở nên sạch hơn, nhưng vẫn có nhiều dấu ngoặc đơn không cần thiết:

Await

Await về cơ bản là cú pháp tuyệt vời cho Promises. Nó làm cho code không đồng bộ của bạn trông giống như code đồng bộ / code thủ tục, dễ hiểu hơn cho con người.

Chức năng printString hoàn toàn không thay đổi từ Promises. Một lần nữa, hãy để  in các chữ cái A, B, C theo thứ tự đó:

Callbacks, Promises và Async/Await trong JavaScript
Callbacks, Promises và Async/Await trong JavaScript

Vâng…Tốt hơn nhiều!

Bạn có thể nhận thấy rằng chúng tôi sử dụng từ khóa “async” cho function printAll(). Điều này cho phép JavaScript biết rằng chúng tôi đang sử dụng cú pháp async/await và là cần thiết nếu bạn muốn sử dụng Await. Điều này có nghĩa là bạn có thể sử dụng Await ở cấp độ toàn cầu; nó luôn cần một hàm bao bọc. Hầu hết các mã JavaScript chạy bên trong một hàm, vì vậy đây không phải là vấn đề lớn.

Xin chờ một chút

Hàm printString không trả về bất cứ thứ gì và độc lập, tất cả những gì chúng tôi quan tâm là thứ tự. Nhưng nếu bạn muốn lấy đầu ra của hàm thứ nhất, hãy làm gì đó với hàm thứ hai, rồi chuyển nó sang hàm thứ ba?

Thay vì in chuỗi mỗi lần, hãy tạo ra một hàm sẽ nối chuỗi và truyền lại.

Callbacks

Đây là kiểu Callbacks:

Và để gọi nó:

Không tốt lắm.

Promises

Với Promises thì sao:

Gọi nó ra:

Sử dụng các hàm mũi tên có nghĩa là chúng ta có thể làm cho mã đẹp hơn một chút:

Điều này chắc chắn dễ đọc hơn, đặc biệt nếu bạn thêm nhiều hơn vào chuỗi, nhưng vẫn còn một mớ hỗn độn của dấu ngoặc đơn.

Await

Function vẫn giống như phiên bản Promise. Và để gọi nó:

Có thể nói là tuyệt vời.. 😀

Tổng kết

Qua bài viết này hy vọng bạn có thể hiểu thêm về Callbacks, Promises và Async/Await trong JavaScript.

Bài viết được dịch từ FrontEnd Weekly của Medium, mình thấy bài viết khá là hay nên mạn phép dịch lại, câu từ văn chữ còn lủng củng mong các bạn thông cảm :P. Bạn có thể xem qua bài viết gốc ở link bên dưới, xin cảm ơn!

Nguồn: https://medium.com/front-end-weekly/callbacks-promises-and-async-await-ad4756e01d90

Hướng dẫn deploy project Nuxt JS lên VPS 😍 Giới thiệu PM2 – Trình quản lý các ứng dụng NodeJS Thêm meta tags cho website Nuxt JS Tạo Blog đơn giản với Nuxt JS và WordPress API Cài đặt Git trên Ubuntu 18.04 Hướng dẫn cài đặt Node.js trên VPS Ubuntu 18.04 Sử dụng JavaScript Fetch API với Async/Await Styling Placeholder Text của thẻ input với CSS Cài đặt và Active WebStorm 2019.2.4 với License key 50+ thuộc tính thú vị trong CSS

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.