Mã không đồng bộ từng là một vấn đề khó khăn khi viết bằng JavaScript. Để viết các hoạt động không đồng bộ trong mã của bạn, bạn sẽ phải xử lý nhiều cấp độ của các hàm gọi lại. Bạn càng đưa nhiều hàm vào mã của mình, thì càng khó đọc.
Trong ES6, những lời hứa đã giải cứu. Hứa hẹn là một cách để viết mã không đồng bộ hiệu quả trong JavaScript.
Trong hướng dẫn này, chúng ta sẽ nói về lời hứa là gì và cách chúng hoạt động. Chúng tôi sẽ giới thiệu cho các bạn một ví dụ về lời hứa để giúp bạn tìm hiểu cách sử dụng chúng trong mã của mình. Hãy bắt đầu!
Lời hứa là gì?
Một lời hứa là một đối tượng trả về một phản hồi mà bạn muốn nhận được trong tương lai.
Một cách tốt để nghĩ về những lời hứa trong JavaScript là so sánh chúng với cách mọi người đưa ra lời hứa. Khi bạn hứa, đó là sự đảm bảo rằng bạn sẽ làm được điều gì đó vào một ngày trong tương lai. Bạn sẽ không làm điều đó bây giờ; bạn sẽ làm điều đó vào một thời điểm nào đó sau này.
Một lời hứa có thể tồn tại ở một trong ba trạng thái:
- Đang chờ xử lý:Một lời hứa vẫn chưa được hoàn thành.
- Bị từ chối:Một lời hứa không trả lại giá trị.
- Thực hiện:Một lời hứa đã được hoàn thành.
Điều này cũng tương tự như những lời hứa trong cuộc sống thực. Bạn có thể có một lời hứa đang chờ xử lý mà bạn nói rằng bạn sẽ thực hiện trong tương lai. Bạn có thể thực hiện một lời hứa. Bạn có thể từ chối hoặc “phá vỡ” một lời hứa và không tuân theo những gì bạn đã đồng ý làm.
Khi bạn thực hiện một lời hứa, nó sẽ được chờ đợi. Lời hứa sẽ tồn tại ở trạng thái này cho đến khi nhận được phản hồi và lời hứa được thực hiện hoặc bị từ chối.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Cách tạo lời hứa trong JavaScript
Chúng ta sẽ bắt đầu bằng cách tạo một lời hứa trả về tên của người dùng. Chức năng này sẽ trả về tên người dùng cho chương trình của chúng tôi sau ba giây. Điều này sẽ giúp chúng ta thấy cách các lời hứa được sử dụng để viết mã không đồng bộ.
Để tạo một lời hứa, chúng ta cần tạo một đối tượng Promise:
new Promise((resolve, reject) => {
// Your code here
});
Promises chấp nhận hai đối số:một hàm xử lý sự thành công của lời hứa và một hàm xử lý một lời hứa không thành công. Điều này có nghĩa là lời hứa của chúng ta sẽ trả về các giá trị khác nhau tùy thuộc vào kết quả của nó.
Một lời hứa phải chứa một câu lệnh “if” xác định liệu một lời hứa có được thực thi thành công hay không. Nếu một lời hứa không được thực thi thành công, nó sẽ trả về một lời hứa ở trạng thái bị từ chối:
new Promise((resolve, reject) => {
if (value is true) {
resolve();
} else {
reject();
}
});
Mở một tệp JavaScript mới và sao chép mã sau:
let returnName = new Promise((resolve, reject) => {
let name;
setTimeout(() => {
name = "Cinnamon";
if (name === "Cinnamon") {
resolve(name);
} else {
reject("This promise has failed.");
}
}, 3000);
});
Mã này trả về tên Cinnamon vào chương trình chính của chúng tôi khi chúng tôi gọi lời hứa. Mã này mất ba giây để chạy, hoặc 3.000 mili giây. Điều này có nghĩa là khi chúng tôi gọi điện, lời hứa của mình sẽ chờ xử lý trong ba giây. Sau khi lời hứa được giải quyết, một lời hứa đã được giải quyết hoặc bị từ chối sẽ được quay trở lại chương trình chính của chúng tôi.
Nếu “name” bằng “Cinnamon”, lời hứa của chúng ta đã được giải quyết thành công; nếu không, lời hứa của chúng tôi sẽ bị từ chối. Trong ví dụ này, "tên" được đặt thành "Cinnamon". Bởi vì chúng tôi đã chỉ định một tên, lời hứa của chúng tôi sẽ tự giải quyết.
sau đó () và bắt () với Lời hứa
Mã của chúng tôi chưa thực thi. Chúng ta phải gọi đối tượng hứa hẹn của mình:
returnName.then(data => {
console.log(data);
});
then() từ khóa cho phép chúng tôi lấy phản hồi từ lời hứa của chúng tôi. Nó được gọi sau khi lời hứa được giải quyết. Trong ví dụ này, chúng tôi in ra nội dung của data , là phản hồi được trả lại từ lời hứa của chúng tôi, cho bảng điều khiển.
Mã của chúng tôi trả về:Cinnamon.
then() chỉ xử lý những lời hứa thành công. Điều gì xảy ra nếu lời hứa của chúng ta bị từ chối? Đó là nơi mà catch() phương pháp đi kèm.
Bạn có thể nêu nhiều then() tuyên bố bên trong một lời hứa. Đây được gọi là chuỗi lời hứa. Hãy sử dụng một ví dụ để minh họa cách hoạt động của chuỗi:
returnName.then(data => {
console.log(data);
}).then(() => {
console.log("This function is over!");
Mã này sẽ trả về:
Quế
Chức năng này đã kết thúc.
thì các câu lệnh sau đó () được thực thi theo thứ tự mà chúng được chỉ định bên trong một phương thức khởi tạo lời hứa.
catch() phương thức được đính kèm với một lời hứa như then() phương pháp. Hãy tạo một trình xử lý để quản lý một lời hứa bị từ chối cho ví dụ tên của chúng ta:
returnName.then(data => {
console.log(data);
}).catch(error => {
console.log(error);
});
Chúng tôi đã giải quyết một catch() câu lệnh sau then() của chúng tôi tuyên bố. Lưu ý rằng chúng tôi sử dụng dấu chấm phẩy (;) ở cuối mã lời hứa của chúng tôi. Bạn không nên chỉ định dấu chấm phẩy sau then() nếu bạn đang sử dụng catch() . Điều này sẽ cho JavaScript biết rằng sau đó () và catch () là tách biệt và do đó, một lỗi sẽ được trả về trong mã của bạn.
Nếu lời hứa của chúng ta bị từ chối, nội dung của câu lệnh catch () sẽ chạy.
Hãy xem điều gì sẽ xảy ra khi chúng tôi chạy mã của mình:
Quế
Giá trị Cinnamon được trả lại vì lời hứa của chúng tôi giải quyết thành công. Nếu giá trị của “name” không phải là “Cinnamon” trong lời hứa của chúng tôi, thì lỗi sẽ được trả về:
Uncaught (trong lời hứa) Lời hứa này đã thất bại.
Chúng tôi đã chỉ định thông báo lỗi:"Lời hứa này đã thất bại." trong hàm từ chối () bên trong lời hứa của chúng tôi.
Cuối cùng () với Lời hứa
Điều gì xảy ra nếu bạn muốn thực thi một khối mã sau khi một lời hứa đã được thực thi, bất kể lời hứa đó thành công hay thất bại?
Đó là nơi finally() tuyên bố có ích. finally() tuyên bố chạy cho dù một lời hứa có được thực hiện hay không. Hãy cập nhật lời hứa của chúng tôi để sử dụng một tuyên bố cuối cùng:
returnName.then(data => {
console.log(data);
}).catch(error => {
console.log(error);
}).finally(() => {
console.log("The returnName promise has been executed.");
});
Mã của chúng tôi trả về:
Quế
Lời hứa returnName đã được thực hiện.
Lời hứa của chúng tôi trả lại Cinnamon bởi vì nó đã thành công. Nội dung của finally() sau đó, câu lệnh được thực thi, trả về một thông báo khác cho bảng điều khiển của chúng tôi.
Kết luận
JavaScript hứa hẹn cho phép bạn viết mã không đồng bộ rõ ràng.
Trong hướng dẫn này, chúng tôi đã đề cập đến các nguyên tắc cơ bản của lời hứa. Còn rất nhiều điều để hứa hẹn hơn những gì chúng tôi đã trình bày trong hướng dẫn này. Bước tiếp theo trong hành trình học tập của bạn là viết một vài lời hứa trong mã của riêng bạn.
Đây là một thử thách:viết một lời hứa đưa ra một yêu cầu trên web và trả lại phản hồi của nó. Để làm điều này, bạn sẽ muốn sử dụng API tìm nạp () để thực hiện yêu cầu. Yêu cầu này nên được đính kèm trong một lời hứa. Bạn nên viết mã xử lý cả lời hứa nếu nó thành công hay thất bại.
Nếu bạn muốn đi xa hơn, hãy xem các hàm không đồng bộ của JavaScript. Chúng có thể được sử dụng để viết mã không đồng bộ và thường được sử dụng với Promises.
Bây giờ bạn đã sẵn sàng để bắt đầu viết JavaScript hứa hẹn như một chuyên gia!