56 Views

Làm Việc Với Promises Trong JavaScript

Chào các bạn! Ở bài học trước chúng ta đã tìm hiểu về callback trong JavaScript. Tiếp tục với series hôm nay chúng ta sẽ cùng nhau làm rõ các vấn đề về promises thông qua các ví dụ thực tiễn.

Promises trong JavaScript là gì?

Promise là một cơ 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  tình trạng có quá nhiều các callback lồng vào nhau gây tình trạng callback hell hay pyramid of doom. Thực tế promises là 1 special JavaScript object thể hiện cho sự hoàn thành hoặc thất bại của một tiến trình bất đồng bộ.

Cách sử dụng promises trong JavaScript

Cú pháp:

Khi promise thực thi hoàn thành công việc, nó sẽ gọi một trong 2 hàm là resolve(value)reject(error). Giả sử trên kia là một lời cầu hôn của chàng trai dành cho cô gái, ban đầu cô gái hẳn sẽ ngại ngùng còn ngập ngừng (Pending), nhưng sau đó chắc chắn cô gái sẽ đồng ý hoặc từ chối bạn. Hai đối số trên cũng giống như lời tỏ tình vậy. Nếu đồng ý resolve(value) thì status sẽ là “fulfilled”, và result chính là value. Còn cô gái từ chối reject(error) lúc này status sẽ là “rejected” và result chình là error.

Để tiếp tục câu chuyện tình yêu ban nãy, bây giờ chúng ta sẽ khởi tạo một promises và thực thi thông qua setTimeout.

Đây chính là trường hợp chàng trai đã đưa ra lời tỏ tình thành công với cô gái, đó hẳn một tin vui. Tuy nhiên cô gái vẫn chưa đưa ra câu trả lời. Ở đoạn code trên, sau một giây “xử lý”, trình thực thi sẽ gọi resolve("done")để đưa ra kết quả. Điều này thay đổi trạng thái của promise đối tượng:

Còn nếu chàng trai cũng ngại ngùng nói không nên lời cầu hôn thì sao. Đó chắc chắn là thất bại rồi:

Tóm lại, người thực thi nên thực hiện một công việc sau đó gọi resolve hoặc reject để thay đổi trạng thái của promise tương ứng. Một promise được giải quyết resolve hoặc bị từ chối reject được gọi là "settled", nó trái ngược với promise ban đầu “Pending”.

then

Giả sử anh chàng ban nãy đã đưa ra lời tỏ tình thành công với cô gái. Vậy làm sao để chúng ta biết cô gái đó đồng ý hay không. Lúc này giải pháp được đưa ra là sử dụng then. Nó có cú pháp cơ bản như sau:

  • Đối số đầu tiên của .then là một hàm chạy khi promise được giải quyết và nhận kết quả.
  • Đối số thứ hai của .then là một hàm chạy khi promise bị từ chối và nhận được lỗi.

Ví dụ: đây là một promise được giải quyết thành công:

Còn đây là trường hợp bị từ chối:

Còn nếu bạn muốn cô gái đồng ý luôn thì:

Đây là trường hợp bạn chỉ quan tâm đến việc hoàn thành thành công, bạn có thể cung cấp một đối số hàm cho .then

catch

Nếu bạn chỉ quan tâm đến sai sót, bạn có thể sử dụng  null như là đối số đầu tiên: .then(null, errorHandlingFunction). Hoặc chúng ta có thể sử dụng .catch(errorHandlingFunction)

finally

finally là một trình xử lý tốt để thực hiện việc dọn dẹp, ví dụ như dừng các loading indicators, vì chúng không còn cần thiết nữa, bất kể kết quả là gì.

Như thế này:

  • Một finallytrình xử lý không có đối số. Trong finallychúng ta không biết liệu promise có thành công hay không.
  • Một finallytrình xử lý chuyển kết quả và lỗi cho trình xử lý tiếp theo.

Ví dụ, ở đây kết quả được chuyển từ finally đến then:

Còn ở đây có một lỗi trong promise, nó sẽ chuyển từ finally qua catch:
Ở bài trước chúng ta đã cùng nhau xây dựng hàm loadScript để tải 1 tệp. Bây giờ chúng ta sẽ cùng nhau viết lại nó bằng promise
Kết hợp với then ta được:

Mến tôi mới vào đọc đúng không nè .. !! Thế hãy nhắn tin cho tôi đi Hoặc bình luận bên dưới nhé

DMCA.com Protection Status