Chọn Promise hay Observable khi làm việc với Angular?

Tram Ho

Như các bạn đã biết, và cũng rất nhiều bài viết đã nói về vấn đề này, Promise và Observable đều là các kỹ thuật dùng để xử lý dữ liệu bất đồng bộ trong javascript nói chung và Angular nói riêng. Nhưng hai thằng này có gì khác nhau? Nên dùng thằng nào hơn? … Những câu hỏi như vậy thì có rất nhiều người đặt ra, và trong bài viết này, mình xin đưa ra một vài phân tích cá nhân để chọn ra một thằng phù hợp nhất.

1. So sánh

Khả năng trả về nhiều kết quả

  • Đối với Promise, sau mỗi lần xử lý dữ liệu thì nó chỉ có thể trả về một giá trị duy nhất.

  • Với Observable, nó có thể trả về nhiều giá trị đồng thời.

Khả năng hủy bỏ Request

  • Đối với Promise, khi chúng ta đã tạo một request thì không có cách nào hủy bỏ request đó.
  • Observable thì có khả năng hủy bỏ request đã tạo.

Khả năng Retry

  • Promise không thể retry khi quá trình xử lý xảy ra lỗi, hoặc phải nhờ vào các tips, thư viện hỗ trợ của bên thứ 3.
  • Observable cung cấp các operators retryretryWhen giúp việc retry các request rất dễ dàng.

.u81a519a6456dbc653d87221c91f0d4d5 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u81a519a6456dbc653d87221c91f0d4d5:active, .u81a519a6456dbc653d87221c91f0d4d5:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u81a519a6456dbc653d87221c91f0d4d5 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u81a519a6456dbc653d87221c91f0d4d5 .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u81a519a6456dbc653d87221c91f0d4d5 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u81a519a6456dbc653d87221c91f0d4d5:hover .postTitle { text-decoration: underline!important; }

  Xây dựng ứng dụng web với Python + Flask Framework + Angular2 + DynamoDB – Phần 1

.uc0ff7c7f04d623e1367902b271e09e43 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .uc0ff7c7f04d623e1367902b271e09e43:active, .uc0ff7c7f04d623e1367902b271e09e43:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .uc0ff7c7f04d623e1367902b271e09e43 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .uc0ff7c7f04d623e1367902b271e09e43 .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .uc0ff7c7f04d623e1367902b271e09e43 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .uc0ff7c7f04d623e1367902b271e09e43:hover .postTitle { text-decoration: underline!important; }

  Vì sao Angular khiến tôi muốn bỏ nghề lập trình

Khả năng xử lý kết quả trước khi trả về

  • Với Promise, do đặc tính chỉ trả về một kết quả duy nhất nên việc xử lý kết quả có thể thực hiện ở bước sau khi đã nhận dc kết quả.

  • Với Observable, nó cung cấp rất nhiều các operators mạnh mẽ, phục vụ cho việc xử lý kết quả trước khi trả về.

Tham khảo thêm về các operators tại đây: https://www.learnrxjs.io/operators

2. Kết luận

Như vậy các bạn có thể thấy Observable đã tỏ rõ thế mạnh của mình hơn Promise nên lựa chọn của mình là sử dụng Observable trong Angular. Cũng không phải là ngẫu nhiên mà Angular nó lại chọn thằng Observable để phát triển đúng không! Hi vọng qua bài viết sơ sài này các bạn cũng có những đánh giá riêng về hai thằng này và có lựa chọn đúng đắn khi làm việc với Angular.

.uefff3c4926aa1322c30bd4133745e23c { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .uefff3c4926aa1322c30bd4133745e23c:active, .uefff3c4926aa1322c30bd4133745e23c:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .uefff3c4926aa1322c30bd4133745e23c { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .uefff3c4926aa1322c30bd4133745e23c .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .uefff3c4926aa1322c30bd4133745e23c .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .uefff3c4926aa1322c30bd4133745e23c:hover .postTitle { text-decoration: underline!important; }

  Đừng đổ lỗi cho Framework: Kinh nghiệm khi làm việc với Angular và React

.u685425a0bdc8e63c802ee1b82c8255aa { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u685425a0bdc8e63c802ee1b82c8255aa:active, .u685425a0bdc8e63c802ee1b82c8255aa:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u685425a0bdc8e63c802ee1b82c8255aa { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u685425a0bdc8e63c802ee1b82c8255aa .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u685425a0bdc8e63c802ee1b82c8255aa .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u685425a0bdc8e63c802ee1b82c8255aa:hover .postTitle { text-decoration: underline!important; }

  Xây dựng ứng dụng web với Python + Flask Framework + Angular2 + DynamoDB – Phần 2

Chia sẻ bài viết ngay

Nguồn bài viết : viblo