Nếu bạn có cập nhật về JavaScript hiện đại, có lẽ bạn đã nghe về những promises trước đây. Mặc dù, có thể là bạn chưa thực sự sử dụng chúng. Hoặc bạn không biết làm thế nào hoặc khi nào sử dụng chúng. Promises khá dễ sử dụng và có thể giúp bạn khỏi những cơn đau đầu về không đồng bộ trong JavaScript.
Vấn đề với callbacks
Mặc dù Promises đã xuất hiện trong JavaScript trong một vài năm, nhưng hãy quay lại thời điểm mà những Promises không tồn tại. Điều này sẽ giúp bạn hiểu rõ hơn về lý do tại sao Promises sẽ là hướng đi khi xử lý các hoạt động không đồng bộ.
Một cách xử lý các hoạt động không đồng bộ trước khi có Promises là sử dụng các callbacks- chúng là cách xử lý các hoạt động không đồng bộ số một trong một thời gian dài. Nhưng callbacks có nhược điểm của nó.
Hãy xem ví dụ sau:
Như bạn có thể thấy, loadScript hàm được truyền tham số callback được thực thi khi tập lệnh được tải. Nó hoạt động tốt, mặc dù vậy, nó đặt ra một câu hỏi lớn: Điều gì xảy ra khi kịch bản không tải được vì một số lý do? Tốt nhất là ngây thơ mà bỏ qua thực tế là tải tập lệnh có thể thất bại.
Vậy làm thế nào chúng ta có thể cải thiện điều này? Điều đó khá đơn giản. Chúng tôi thêm một tham số mới vào chức năng callback cho biết liệu tập lệnh đã được tải mà không có bất kỳ lỗi nào.
Nhưng điều gì xảy ra khi chúng ta có một kịch bản mà chúng ta không phụ thuộc vào một hình ảnh được tải, mà là ba hình ảnh được tải? Hay thậm chí nhiều hơn?.
Những gì chúng ta sẽ kết thúc được gọi là callback hell
Giới thiệu ngắn gọn về promises
"Các Promise đối tượng đại diện cho sự hoàn thành cuối cùng (hoặc thất bại) của một hoạt động không đồng bộ và giá trị kết quả của nó.”
Như MDN đã đề cập, các promises được sử dụng để xử lý các hoạt động không đồng bộ. Như một vấn đề thực tế, promises là cách để xử lý các hoạt động không đồng bộ theo cách đơn giản nhất. Nó có thể xử lý nhiều hoạt động không đồng bộ dễ dàng và cung cấp xử lý lỗi tốt hơn so với các callbacks and events. Trên hết, promises cũng làm tăng khả năng đọc mã của bạn.
Một promises có thể có một trong bốn trạng thái sau:
fulfilled: hành động liên quan đến promise đã thành công
rejected: hành động liên quan đến lời hứa promise thất bại
pending: promise vẫn đang chờ xử lý (chưa được thực hiện hoặc từ chối)
settled: promise đã được thực hiện hoặc từ chối
Promise trong Code
Như đã nói trước đây, các promise thường được sử dụng để xử lý dễ dàng hơn các hoạt động không đồng bộ, như các lệnh gọi API hoặc hoạt động tệp. Các hoạt động không đồng bộ này được bắt đầu bên trong hàm executor .
Nếu hoạt động không đồng bộ thành công, kết quả mong đợi được trả về bằng cách gọi hàm resolve. Tương tự, nếu một số lỗi không mong muốn xảy ra trong quá trình thực thi thao tác không đồng bộ, kết quả được hàm trả về reject.
Hãy bắt đầu bằng cách xem một promise được tạo trong JavaScript:
Promise mới ( người thực thi );
Promise mới (chức năng (giải quyết, từ chối) {...});
Như bạn có thể thấy trong ví dụ trên, hàm tạo Promise chấp nhận một hàm được gọi executor. Hàm executor có hai tham số: resolve và reject, đó là chức năng.
Bây giờ chúng ta đã biết làm thế nào một promise có thể được tạo ra, đã đến lúc tạo ra một promise đơn giản để giúp chúng ta hiểu hơn về chúng.
Trong ví dụ trên, chúng tôi cố gắng tìm nạp một số dữ liệu từ API. Nếu API trả về mã trạng thái HTTP 200, yêu cầu đã thành công. Nếu không, yêu cầu thất bại.
Nói cách khác, nếu mã trạng thái HTTP là 200, promise sẽ được giải quyết. Nếu không, promise sẽ bị từ chối.
Vậy làm thế nào chúng ta có thể sử dụng promise này mà chúng ta vừa tạo ra?.
Khi một trong hai resolve hoặc reject đã được gọi, promise đã được giải quyết. Tại thời điểm đó, phần tiếp theo của chuỗi được thực thi. Điều này thường là một then hoặc catch. Chỉ có một giải quyết hoặc từ chối nên được gọi bởi executor. Thay đổi trạng thái của promise là cuối cùng và tất cả các cuộc gọi tiếp theo resolve và reject bị bỏ qua.
Cuộc then gọi lại được kích hoạt khi lời hứa được giải quyết. Cũng có thể xâu chuỗi các then phương thức gọi lại. Cuộc catch gọi lại được thực hiện khi lời hứa bị từ chối. Cuộc finally gọi lại được gọi bất kể thành công hay thất bại.
All and Race
Hai chức năng cuối cùng mà chúng tôi chưa thực hiện là chức năng all và race. Mặc dù chúng có thể có ích, nhưng bạn có thể sử dụng chúng ít hơn các chức năng promise khác.
All
Ví dụ hoàn hảo về việc sử dụng Promise.all là khi thực hiện nhiều yêu cầu AJAX cùng một lúc.
Race
Thay vì chờ đợi tất cả các promise sẽ được giải quyết hoặc từ chối, hãy kích hoạt Promise.race ngay khi bất kỳ promise nào trong mảng được giải quyết hoặc từ chối.
Đầu ra trong giao diện điều khiển là “Output: Second!”
Lưu ý rằng trong ví dụ trên, request1 lời hứa không bao giờ được giải quyết!
Hy vọng bài viết trên đây đã cho bạn cái nhìn khái quát về promises trong Javascript từ đó học tập và chinh phục thành công được ngôn ngữ này.
Nguồn Tổng hợp
---
JT1 - IT Recruitment Agency Website: https://www.jt1.vn Email: hi@jt1.vn Điện thoại: +8428 6675 6685 Xem thêm các bài viết khác tại: https://www.jt1.vn/blog Theo dõi chúng tôi tại: https://www.facebook.com/jt1asia/
