Callback hell và những cách giải quết – Minh Luc’s Blog
Chào mừng bạn đến với pgdgiolinhqt.edu.vn trong bài viết về Callback hell là gì chúng tôi sẽ chia sẻ kinh nghiệm chuyên sâu của mình cung cấp kiến thức chuyên sâu dành cho bạn.
Với nhiều người mới làm việc với JS thì callback đúng là một cái gì đó nguy hiểm, thực sự là như vậy! nếu có một vài tác vụ bất đồng bộ cái này lần lượt thục hiện tiếp sau cái kia mà bạn viết không cẩn thị thì cái mà bạn tạo ra chính là một call back hell.
Giả sử tôi càn làm 4 tác vụ (bất đồng bộ ) lần lượt sau vái này tiếp sau cái kia, cách viết như sau chính là callback hell
khỏi cần phải nói nhiều đoạn code trên đúng là shit code thứ thiệt rồi, khó đọc khó maintain nếu vô tình đọc được thì cũng chả thể hiểu là đoạn này làm mục đích gì, vậy có cách nào để giải quết vấn đề này không?
Water Fall callback
cách dầu tiên tôi nghĩ đến chính là Water Fall callback, đơn giản là chia callback ra nhiều hàm rồi làn luwowit cái trước gọi cái sau ?.
cách này chỉ là một cách viết khác so với hell ởn trên tuy là có clear hơn đoi chút những xem ra vẫn không cái thiện nhiều về mặt maintain code sau này.
Promisse
Promisse là một cách khá triệt để để xử lý Callback hell, một promisse sẽ định nghĩa một tác vụ bất đồng bộ với hai phương thức cơ bản là resolve docs (hay fullfill ) để báo tác vụ thành công “reject` var then để thực hiện tác vụ tiếp theo để chỉ tác vụ thất bại.
ta sẻ xử lý 4 tác vụ trên với promisse như sau:
có vẻ hơi dài dòng nghỉ ?, nhưng thay vào đó ta sẽ được một code flow cực kỳ rõ ràng ta sẽ dễ dàng debug cũng như ddowcj đoạn code này, nó sẽ đợi 500ms rồi log ra task 1 sau đó đợi 600ms rồi log ra task 2 v.v… thực sự vấn để Callback hell đã được giải quết. nhưng vấn đề là cú pháp hơi dài dòng một chút, những nhà phát triển JavaScript cũng nhận ra điều này và đưa ra những cải tiến lớn đó là generater function ở phiên bản ES6 và async/await với ES6+
generater function
nếu bạn muốn hiểu rõ hơn về generater function mời đọc qua bài viết này của tôi.
với giả pháp này code của chúng ta sẽ dẽ nhìn hơn khá nhiều, nói một cách dễ hiểu đây như một cách pause hàm lại và resume lại sau mỗi lần goi next, đây quả thực là một chức năng mạnh mẽ không chỉ với
đây là một tính năng của ES6 nên mình sẽ dùng cú pháp ES6 luôn nhé.
khá là gọn gẽ ? những vẫn chưa phải sô một, xin trân trọn giới thiệu async/await
async/await
đây là một tính năng mới của ES7, không cần phải nói nhiều làm gì đoạn code sau sẽ nói lên tất cả ?
trên đây mình đã giới thiệu mội vài cách cơ bản đẻ giải quyết callback hell, hy vọng giúp ích được cho ai cần.
@minhlucvan
