Lời hứa là một trong những cách chúng ta có thể xử lý các hoạt động không đồng bộ trong JavaScript. Nhiều người gặp khó khăn trong việc hiểu cách thức hoạt động của Promise, vì vậy trong bài đăng này, tôi sẽ cố gắng giải thích chúng một cách đơn giản nhất có thể.
Promise là một chủ đề rộng nên tôi không thể đi sâu vào từng chi tiết trong bài viết này. Tuy nhiên, bạn sẽ tìm thấy phần giới thiệu chung về Promise là gì, giải thích các thuật ngữ như giải quyết, từ chối và tạo chuỗi cũng như ví dụ về mã để tạo và sử dụng Promise.
Điều kiện tiên quyết: Để hiểu bài viết này tốt hơn, hãy xem bài đăng khác của tôi về Gọi lại JavaScript.
Lời hứa là gì?
Một lời hứa trong JavaScript tương tự như một lời hứa trong cuộc sống thực. Khi chúng ta hứa trong cuộc sống thực, đó là sự đảm bảo rằng chúng ta sẽ làm điều gì đó trong tương lai. Bởi vì lời hứa chỉ có thể được thực hiện cho tương lai.
Một lời hứa có 2 kết quả có thể xảy ra: nó sẽ được giữ khi thời điểm đến, hoặc nó sẽ không.
Điều này cũng tương tự đối với các lời hứa trong JavaScript. Khi chúng tôi xác định một lời hứa trong JavaScript, nó sẽ được giải quyết khi đến thời điểm hoặc nó sẽ bị từ chối.
Lời hứa trong JavaScript
Trước hết, Promise là một đối tượng. Có 3 trạng thái của đối tượng Promise:
- Chưa giải quyết: Trạng thái ban đầu, trước khi Lời hứa thành công hay thất bại
- Đã giải quyết: Hoàn thành lời hứa
- Vật bị loại bỏ: thất hứa
Ví dụ: khi chúng tôi yêu cầu dữ liệu từ máy chủ bằng cách sử dụng Lời hứa, nó sẽ ở chế độ chờ xử lý cho đến khi chúng tôi nhận được dữ liệu của mình.
Nếu chúng tôi lấy được thông tin từ máy chủ, Promise sẽ được giải quyết thành công. Nhưng nếu chúng ta không lấy được thông tin thì Promise sẽ ở trạng thái bị từ chối.
Ngoài ra, nếu có nhiều yêu cầu, thì sau khi Lời hứa đầu tiên được giải quyết (hoặc bị từ chối), một quy trình mới sẽ bắt đầu mà chúng ta có thể đính kèm trực tiếp bằng một phương thức gọi là chuỗi.
Nếu thích, bạn cũng có thể xem phiên bản video bên dưới:
Sự khác biệt giữa Gọi lại và Lời hứa là gì?
Sự khác biệt chính giữa Hàm gọi lại và Lời hứa là chúng tôi đính kèm một cuộc gọi lại vào một Lời hứa thay vì chuyển nó. Vì vậy, chúng tôi vẫn sử dụng các chức năng gọi lại với Lời hứa, nhưng theo một cách khác (xâu chuỗi).
Đây là một trong những lợi thế lớn nhất của việc sử dụng Promise, nhưng tại sao?
Chuỗi là gì?
Các hàm gọi lại đã được sử dụng một mình cho các hoạt động không đồng bộ trong JavaScript trong nhiều năm. Nhưng trong một số trường hợp, sử dụng Promise có thể là một lựa chọn tốt hơn.
Nếu có nhiều hoạt động không đồng bộ được thực hiện và nếu chúng ta cố gắng sử dụng các Gọi lại cũ tốt cho chúng, chúng ta sẽ nhanh chóng thấy mình ở trong một tình huống gọi là Địa ngục gọi lại:
firstRequest(function(response) {
secondRequest(response, function(nextResponse) {
thirdRequest(nextResponse, function(finalResponse) {
console.log('Final response: ' + finalResponse);
}, failureCallback);
}, failureCallback);
}, failureCallback);Tuy nhiên, nếu chúng ta xử lý thao tác tương tự với Promise, vì chúng ta có thể đính kèm các Gọi lại thay vì chuyển chúng, nên lần này đoạn mã trên trông gọn gàng và dễ đọc hơn nhiều:
firstRequest()
.then(function(response) {
return secondRequest(response);
}).then(function(nextResponse) {
return thirdRequest(nextResponse);
}).then(function(finalResponse) {
console.log('Final response: ' + finalResponse);
}).catch(failureCallback);Đoạn mã ở trên cho thấy cách nhiều cuộc gọi lại có thể được xâu chuỗi lần lượt. Chuỗi là một trong những tính năng tốt nhất của Lời hứa.
Từng bước tạo và sử dụng lời hứa
Đầu tiên, chúng ta sử dụng một hàm tạo để tạo một đối tượng Promise:
const myPromise = new Promise();Phải mất hai tham số, một cho thành công (giải quyết) và một cho thất bại (từ chối):
const myPromise = new Promise((resolve, reject) => {
// condition
});Cuối cùng, sẽ có một điều kiện. Nếu điều kiện được đáp ứng, Promise sẽ được giải quyết, nếu không nó sẽ bị từ chối:
const myPromise = new Promise((resolve, reject) => {
let condition;
if(condition is met) {
resolve('Promise is resolved successfully.');
} else {
reject('Promise is rejected');
}
});Vì vậy, chúng tôi đã tạo Lời hứa đầu tiên của mình. Bây giờ chúng ta hãy sử dụng nó.
then() cho các Lời hứa đã giải quyết:
Nếu bạn xem lại hình ảnh ở đầu bài viết này, bạn sẽ thấy có 2 trường hợp: Một là lời hứa đã được giải quyết và một là lời hứa bị từ chối. Nếu Lời hứa được giải quyết (trường hợp thành công), thì điều gì đó sẽ xảy ra tiếp theo (tùy thuộc vào những gì chúng ta làm với Lời hứa thành công).
myPromise.then();Phương thức then() được gọi sau khi Promise được giải quyết. Sau đó, chúng ta có thể quyết định phải làm gì với Lời hứa đã giải quyết.
Ví dụ: hãy ghi thông báo vào bảng điều khiển mà chúng tôi nhận được từ Lời hứa:
myPromise.then((message) => {
console.log(message);
});catch() cho các Promise bị từ chối:
Tuy nhiên, phương thức then() chỉ dành cho các Lời hứa đã giải quyết. Điều gì sẽ xảy ra nếu Lời hứa không thành công? Sau đó, chúng ta cần sử dụng phương thức catch().
Tương tự như vậy, chúng tôi đính kèm phương thức then(). Chúng ta cũng có thể đính kèm trực tiếp phương thức catch() ngay sau then():
myPromise.then((message) => {
console.log(message);
}).catch((message) => {
console.log(message);
});Vì vậy, nếu lời hứa bị từ chối, nó sẽ chuyển sang phương thức catch() và lần này chúng ta sẽ thấy một thông báo khác trên bảng điều khiển.
Gói (lại
Vì vậy, đây là cách chúng tôi tạo Lời hứa trong JavaScript và sử dụng nó cho các trường hợp đã giải quyết và bị từ chối. Lời hứa là một chủ đề rộng lớn hơn và có nhiều điều hơn nữa để tìm hiểu về chúng. Vì vậy, hiểu cách họ làm việc cần có thời gian.
Bài đăng này chỉ là phần giới thiệu về Lời hứa và tôi hy vọng bạn thấy nó hữu ích để có ý tưởng về Lời hứa JavaScript là gì và cách sử dụng chúng.
Nếu bạn muốn tìm hiểu thêm về Phát triển web, vui lòng truy cập Kênh Youtube của tôi để biết thêm.
Cảm ơn bạn đã đọc!
