Vietnam

    Nodejs.vn

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular
    • Tags
    • Groups
    • Search

    JavaScript: Tổng quát về Promise (Phần 1)

    Tutorials
    1
    1
    97
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Phong Nguyễn Dương
      Phong Nguyễn Dương last edited by Phong Nguyễn Dương

      KẺ GIẢI QUYẾT CALLBACK HELL

      👉 I. Sự ra đời của Promise
      Sử dụng callback đã từng là một phương pháp rất phổ biến với những developer, trong khi các hàm JavaScript thông thường sẽ trả về kết quả ngay khi kết thúc thì các hàm callback lại trì hoãn việc này.

      Do đó, callback hay được sử dụng trong trường hợp thực thi các lệnh liên quan tới nhập xuất dữ liệu như download, đọc file và giao tiếp với cơ sở dữ liệu,...

      Nhưng đi đêm lắm có ngày gặp ma, callback hell ra đời và gây ra rất nhiều khó khăn với việc sử dụng callback, mời bạn xem ví dụ dưới đây:

      function thuc_day(viecnaodo){
          viecnaodo();
      }
      
      function danh_rang(viecnaodo){
          viecnaodo();
      }
      
      function di_an_sang(viecnaodo){
          viecnaodo();
      }
      function main(){
          thuc_day(function(){
            danh_rang(function(){
              di_an_sang(function(){
                console.log('OMG!!!!');
              });
            });
          });
      }
      

      Chẳng hạn như ví dụ trên, ta muốn thực hiện các hàm thuc_day, danh_rang và di_an_sang theo thứ tự bằng cách gọi callback, rõ ràng code trên là không tối ưu và nó gây ra callback hell ( tình trạng các hàm callback lồng vào nhau ở quá nhiều tầng).
      👌 Từ đó Promise ra đời.

      🤷 Vậy Promise là gì??? Trong bài hôm nay, chúng ta sẽ cùng tìm hiểu sơ lược về Promise nha. 😁 Les's go:

      👉 II. Promise là gì và tác dụng của nó??

      • Promise là một cơ chế giúp chúng ta viết code theo dạng callback (hàm lồng hàm) một cách tối ưu nhất.
      • Hay sâu xa và chi tiết hơn, Promise là một cơ chế trong JavaScript giúp bạn thực thi các tác vụ *bất đồng bộ mà không rơi vào callback hell ( 😧 ai chưa hiểu ý này thì đọc hiểu ý trên là oke rồi nha).

      *bất đồng bộ: là ta sẽ đặt ra công việc nào đó thực hiện riêng, và trong lúc nó thực hiện riêng, ta sẽ làm công việc khác. ( như là trong khi đợi nước sôi thì ta đi chế mì vậy 😁 )

      👉 III. Cú pháp của một Promise điển hình.

      Đây là cú pháp cơ bản của một Promise:

      new Promise((resolve, reject) => {
          console.log("Code logic");
          resolve();
          // reject();
      })
      .then(() => {
          // throw new Error('Something failed');
          console.log("Chạy nếu như resolve");
      })
      .catch(() => {
          console.log("Chạy nếu như reject");
      })
      .finally(() => {
          console.log("Luôn luôn chạy");
      });
      

      Code trên sẽ chạy ra:

      Code logic
      Chạy nếu như resolve
      Luôn luôn chạy
      

      👉 Có vài điều cần lưu ý sơ qua về cú pháp của Promise (ở code trên 👆 ) nha:

      • nhiều callback (hàm) có thể được thêm bằng cách gọi then().

      • Bạn có thể tiếp tục gọi chuỗi then() sau một hàm bắt lỗi catch().

      👉 IV. TỔNG KẾT

      • Promise được sinh ra để sử dụng callback mà không mắc phải callback hell, nói chung là để tối ưu code.

      Mong rằng các bạn sẽ hiểu được tổng quát Promise là gì, cùng đó là chức năng, và sơ lược về cú pháp của một Promise.

      Nếu có phản hồi gì, xin hãy đóng góp cho chúng mình ở dưới phần bình luận 👇 để chúng mình có những bài viết hoàn thiện hơn nhé!! 😁

      Như vậy, 😁 Tổng quát về Promise (Phần 1) trong Series Javascipt xin phép được kết thúc tại đây. Hãy cùng chờ đợi Phần 2 với những câu chuyện thú vị và bổ ích hơn nha!!!

      Còn bây giờ thì, xin chào và hẹn gặp lại!!!🖐

      1 Reply Last reply Reply Quote 1
      • First post
        Last post
      $(document).ready(function () { app.coldLoad(); }); }