Home / Tutorial / Javascript / Bất đồng bộ trong Javascript – Promise nâng cao

Bất đồng bộ trong Javascript – Promise nâng cao

Tiếp nối phần trước Bất đồng bộ trong Javascript , nêu lên khái niệm, cách xử lý, Promise. Phần này mình sẽ đi chuyên sâu hơn về Promise như sau:

Phần 1: Giới thiệu về bất đồng bộ và Promise cơ bản

Phần 3: Async – Await

Tại mỗi thời điểm, Promise sẽ có thể ở một trong các trạng thái sau:

  • pending: Trạng thái chờ xử lý kết thúc. Trạng thái này chính là trạng thái ban đầu của Promise, nó thể hiện rằng thao tác xử lý của ta chưa kết thúc.
  • fulfilled: Trạng thái xử lý thành công. Trạng thái này thể hiện rằng thao tác xử lý của ta đã kết thúc và thành công.
  • rejected: Trạng thái xử lý thất bại. Trạng thái này thể hiện thao tác xử lý đã kết thúc và thất bại.

Như vậy một Promise khi ở trạng thái pending sẽ được chuyển thành trạng thái fulfilled với kết quả thành công hoặc trạng thái rejected kèm với thông báo lỗi xảy ra khi xử lý kết thúc. Từ 3 trạng thái trên ta có:

  • Hàm then() cho quá trình chạy thành công
  • Hàm catch() khi chạy thất bại.

state-promise

Promise có một số hàm tiện ích và mình sẽ liệt kê ngay dưới đây cùng những mẩu ví dụ mang ngôn từ 16+, ai chưa đủ có thể nhờ người khác đủ tuổi đọc hộ cho nghe nhé :3

– Promise.all():

Nhân dịp cuối năm, Thái Dối được công ty thưởng lương thưởng tết một khoản rất hậu sau bao ngày cầy cuốc. Cầm một cục tiền trong tay, Thái Dối liền mơ tưởng tới các em xinh tươi mát mẻ mơ ước bấy lâu mà chưa có cơ hội được làm gì đó. Nghĩ là làm, Thái Dối thuê ngay một khách sạn vài sao, lên Hội Trời Đất gọi ngay 3 em như siêu mẫu đến khách sạn để được Some 3 😄. Với ý chí không Some không về, vì 3 em không ở cùng nhau nên Thái Dối phải chờ lần lượt đủ cả 3 em. Em gái cuối cùng vừa đến cũng là lúc Thái Dối có một đêm bịt mắt bắt dê, tỉ tê đến tận sáng hôm sau mới về 😄.

Từ câu chuyện trên ta có: 3 cô gái trên Trời Đất là đại diện cho 3 Promise. Thái Dối đại diện cho Promise.all() gọi 3 cô gái kia đến và phải chờ đủ 3 cô gái thì mới được là hú hí cả đêm. Chỉ cần 1 trong 3 cô gái ko đến là coi như kế hoạch cả đời mơ ước tan tành mây khói vì sức Thái khỏe lắm Some 2 không có đủ 😬.

Từ phân tích trên mình có một đoạn demo lấy nhiều api về cùng lúc: https://repl.it/@chungnq/Promiseall.

Ưu điểm của hàm này là khi bạn chạy nhiều câu lệnh Promise cùng 1 lúc, thì thời gian lâu nhất để hàm chạy xong chính là thời gian kết thúc của Promise cuối cùng -> Tăng hiệu năng code, ứng dụng trở nên thân thiện hơn vì không phải chờ lâu.

Promise.all() là phương thức cho phép ta sử dụng một hay nhiều các thành phần Promise trong một lần. Phương thức này sẽ đợi cho tất cả thành Promise chạy xong rồi trả về cho chúng ta một mảng tập hợp tất cả kết quả của các thành phần Promise đã chạy. Nếu một Promise thất bại thì phương thức này cũng không thể thực thi tiếp.

– Promise.race():

Vẫn là trường hợp nêu trên nhưng lần này Thái Dối năm vừa rồi làm không tốt nên bị trừ mất khoản tiền thưởng tết. Buồn bã vì không được some 3 Thái Dối đành phải chọn 1 trong 3 em mà Thái Dối ưng nhất. Em nào đến sớm nhất sẽ được chọn còn 2 em còn lại bị bỏ qua 😄.

Mình có đoạn demo như sau để các bạn dễ hình dung: https://repl.it/@chungnq/Promiserace

Promise.race() thường được ứng dụng khi bạn có nhiều luồng giữ liệu nội dung giống nhau nhưng vị trí khác nhau với người dùng(Server bên Mỹ hay VN chẳng hạn). Thì tùy theo vị trí địa lý, băng thông mà Request – Response nhanh hay chậm khác nhau. Promise.race() sẽ đảm bảo cho bạn nhận được kết quả nhanh nhất từ một trong những Server đấy.

– Promise.resolve() và Promise.reject():
Là 2 phương thức trả về một Promise thành công hay thất bại (then hay catch) và giá trị truyền vào do ta tự định nghĩa

* Demo: https://repl.it/@chungnq/Promiseresolve-Promisereject

Tổng kết: Vậy là coi như đã xong về phần Promise. Trong bài viết mình có sử dụng khá nhiều cú pháp của ES6 nên bạn nào không quen có thể tự tìm hiểu thêm hoặc mình sẽ sớm ra trong các bài viết sắp tới.

Bài viết sau mình sẽ giới thiệu và demo về Async – Await (ES7), một tính năng rất là hay cho giải pháp xử lý bất đồng bộ.

Cảm ơn các bạn đã quan tâm theo dõi. Nếu có câu hỏi hay góp ý, các bạn hãy comment và mình sẽ phản hồi sớm nhất có thể. Chúc các bạn thành công 😄.

 

About Chung Chích Choè

I am Developer

One comment

Leave a Reply

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