Nếu bạn là người mới bắt đầu sử dụng JavaScript, bạn có thể gặp khó khăn trong việc hiểu lời hứa thực sự là gì.
Gần đây tôi đã xuất bản chủ đề này dưới dạng một chủ đề trên Twitter và đã rất ngạc nhiên trước các phản hồi. Vì vậy, tôi quyết định mở rộng điều này thành một hướng dẫn giới thiệu về lời hứa JavaScript.
Tôi đã đọc rất nhiều bài báo về lời hứa và vấn đề là nhiều hướng dẫn trong số này không giải thích chúng theo cách dễ hiểu. Mọi người không hiểu một lời hứa trong JavaScript là gì bởi vì họ không thực sự biết nó nói về cái gì và nó hoạt động như thế nào trong các thuật ngữ đơn giản và dễ hiểu.
Vì vậy, trong bài viết này, tôi sẽ kể cho bạn một câu chuyện ngắn giải thích lời hứa là gì và chúng hoạt động chính xác như thế nào. Tôi cũng sẽ chỉ cho bạn cách sử dụng lời hứa trong JavaScript với một số ví dụ.
Lời hứa trong JavaScript là gì?
Hãy tưởng tượng rằng bạn đang phỏng vấn những người tìm việc cho một vị trí tại công ty của bạn.
Một thanh niên điên cuồng đến phỏng vấn. Khi buổi phỏng vấn của anh ấy sắp bắt đầu, anh ấy nhận ra rằng mình đã quên lý lịch của mình.
Đáng tiếc, phải không?
Tuy nhiên, anh ấy không nản lòng. May mắn cho anh ấy, anh ấy có một người bạn cùng phòng vẫn còn ở nhà vào thời điểm đó.
Anh nhanh chóng gọi điện cho người bạn cùng phòng của mình qua điện thoại và nhờ anh ta giúp đỡ. Anh ấy cầu xin bạn cùng phòng giúp tìm lại lý lịch của mình. Bạn cùng phòng của anh ấy HỨA sẽ nhắn tin lại ngay khi anh ấy có điều gì đó cần báo cáo.
Giả sử bản lý lịch cuối cùng cũng được tìm thấy, anh ta có thể nhắn tin lại:
“Thành công, tôi đã tìm thấy sơ yếu lý lịch của bạn!”
Nhưng nếu anh ta không tìm thấy nó, anh ta phải nhắn lại một tin nhắn thất bại với lý do tại sao anh ta không thể tìm thấy lý lịch. Ví dụ: anh ấy có thể nhắn tin này cho người bạn đang phỏng vấn của mình:
“Xin lỗi, tôi không thể tìm thấy lý lịch của bạn vì chìa khóa két sắt của bạn bị thất lạc.”
Trong thời gian chờ đợi, cuộc phỏng vấn vẫn tiếp tục như kế hoạch và người phỏng vấn giữ lời hứa sẽ tìm ra lý lịch chứ không phải lý lịch thực tế. Vào thời điểm đó, người phỏng vấn đặt trạng thái gửi hồ sơ thành PENDING.
Người được phỏng vấn trả lời tất cả các câu hỏi mà anh ta được hỏi. Nhưng cuối cùng, việc làm của anh ta vẫn phụ thuộc vào TÌNH TRẠNG CUỐI CÙNG trong lý lịch của anh ta.
Bạn cùng phòng của anh ấy cuối cùng cũng nhắn lại. Như chúng ta đã thảo luận trước đây, nếu anh ấy không tìm thấy lý lịch, anh ấy sẽ chia sẻ thất bại này với bạn cùng với lý do tại sao anh ấy không tìm thấy nó.
Khi điều đó xảy ra, cuộc phỏng vấn sẽ kết thúc và người được phỏng vấn sẽ bị từ chối.
Mặt khác, nếu bạn cùng phòng tìm thấy bản lý lịch, anh ta sẽ vui vẻ nói với bạn mình rằng anh ta đã thành công, và anh ta sẽ tiếp tục và THỰC HIỆN hy vọng kiếm được việc làm.
Vậy Làm thế nào Điều này Dịch sang Mã JS?
Bạn cùng phòng hứa tìm lý lịch và nhắn tin lại đồng nghĩa với cách chúng ta định nghĩa lời hứa trong JavaScript. Mã không trực tiếp hoặc ngay lập tức trả về một giá trị. Thay vào đó, nó trả về một lời hứa rằng cuối cùng nó sẽ cung cấp giá trị sau đó.
Một lời hứa trong JavaScript là không đồng bộ, nghĩa là cần có thời gian để giải quyết hoặc hoàn thành. Cũng như việc tìm kiếm sơ yếu lý lịch của ứng viên cần có thời gian để hoàn thành.
Vì lý do đó, người phỏng vấn quyết định không ngồi yên mà không làm gì, vì vậy họ bắt đầu phỏng vấn ứng viên dựa trên lời hứa về việc cung cấp sơ yếu lý lịch. Chúng tôi đang sử dụng lời hứa trả lại sơ yếu lý lịch thay cho sơ yếu lý lịch thực tế.
Công cụ JS cũng không chờ đợi mà không làm gì cả – nó bắt đầu thực thi các phần khác của mã, chờ đợi giá trị trả về của lời hứa.
Nội dung tin nhắn chứa thông báo trạng thái tìm kiếm sơ yếu lý lịch. Với Lời hứa JavaScript, giá trị đó còn được gọi là giá trị trả về.
Nếu thông báo là “thành công”, chúng tôi sẽ tiến hành đăng nhập cho ứng viên và trao cho anh ta vị trí. Nếu nó không thành công, chúng tôi tiến hành từ chối ứng dụng của mình.
Với các lời hứa JavaScript, chúng tôi thực hiện điều này bằng cách sử dụng chức năng gọi lại (trình xử lý lời hứa). Các chức năng này được định nghĩa trong một lồng nhau then() phương pháp.
Để chỉ định cuộc gọi lại nào sẽ gọi, bạn sử dụng hai chức năng sau:
resolve(value): Điều này chỉ ra rằng tác vụ không đồng bộ đã thành công. Điều này sẽ gọi cuộc gọi lại thực hiện trongthen()người xử lý.reject(error): Điều này cho biết có lỗi khi cố gắng chạy tác vụ không đồng bộ. Điều này sẽ gọi cuộc gọi lại từ chối trongthen()người xử lý.
Nếu lời hứa thành công, cuộc gọi lại thực hiện sẽ được gọi. Nếu lời hứa bị từ chối, cuộc gọi lại bị từ chối sẽ được gọi thay thế.
Một lời hứa chỉ đơn giản là một trình giữ chỗ cho một tác vụ không đồng bộ chưa được hoàn thành. Khi bạn xác định một đối tượng lời hứa trong tập lệnh của mình, thay vì trả về một giá trị ngay lập tức, nó sẽ trả về một lời hứa.
Cách viết một lời hứa trong JavaScript
Bạn có thể xác định một lời hứa trong JavaScript của mình bằng cách gọi hàm Promise lớp và xây dựng một đối tượng như thế này:
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('this is the eventual value the promise will return');
}, 300);
});
console.log(myPromise);Chạy cái này trong bảng điều khiển sẽ trả về một Promise vật:
Tuy nhiên, việc xây dựng một đối tượng không phải là cách duy nhất bạn có thể xác định một lời hứa. Bạn cũng có thể sử dụng tích hợp Promise API để đạt được điều tương tự:
const anotherPromise = Promise.resolve("this is the eventual value the promise will return")
console.log(anotherPromise);Mặc dù lời hứa trong mẫu mã đầu tiên sẽ đợi trong 3 giây trước khi thực hiện lời hứa với this is the eventual... tin nhắn, lời hứa trong mẫu mã thứ hai sẽ ngay lập tức thực hiện nó với cùng một tin nhắn.
Lời hứa bị từ chối trong JavaScript
Một Promise cũng có thể bị từ chối. Hầu hết thời gian, việc từ chối xảy ra do JS gặp phải một số loại lỗi khi chạy mã Không đồng bộ. Trong một kịch bản như vậy, nó gọi reject() chức năng thay thế.
Đây là một ví dụ đơn giản và giả tạo về cách một lời hứa có thể bị từ chối:
const myPromise = new Promise((resolve, reject) => {
let a = false;
setTimeout(() => {
return (a) ? resolve('a is found!'): reject('sorry, no a');
}, 300);
});
Bạn có thể nghĩ ra lý do tại sao lời hứa này bị từ chối không? Nếu bạn nói “bởi vì a không sai”, xin chúc mừng!
Lời hứa trong mẫu mã thứ ba sẽ giải quyết từ chối sau khi hết thời gian ba giây, bởi vì (a)? tuyên bố giải quyết sai, mà sẽ kích hoạt reject.
Làm thế nào để xâu chuỗi lời hứa với then()
Khi lời hứa cuối cùng trả về một giá trị, thông thường bạn sẽ muốn làm gì đó với giá trị trả về đó.
Ví dụ: nếu bạn đang thực hiện một yêu cầu mạng, bạn có thể muốn truy cập giá trị và hiển thị giá trị đó trên trang cho người dùng.
Bạn có thể xác định hai chức năng gọi lại mà bạn muốn được gọi khi một lời hứa được thực hiện hoặc bị từ chối. Các chức năng này được xác định bên trong một lồng nhau then() phương pháp:
const anotherPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('this is the eventual value the promise will return');
}, 300);
});
// CONTINUATION
anotherPromise
.then(value => { console.log(value) }) Chạy mã này sẽ hiển thị thông báo thực hiện sau ba giây trong bảng điều khiển:
Lưu ý rằng bạn có thể lồng bao nhiêu lời hứa tùy thích. Mỗi bước sẽ thực hiện sau bước trước đó, lấy giá trị trả về của bước trước đó:
const anotherPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('this is the eventual value the promise will return');
}, 300);
});
anotherPromise
.then(fulfillFn, rejectFn)
.then(fulfilFn, rejectFn)
.then(value => { console.log(value) })Nhưng chúng tôi đã bỏ lỡ một cái gì đó quan trọng.
Hãy luôn ghi nhớ rằng một then() phương thức phải có cả trình xử lý hoàn thành và trình xử lý từ chối. Bằng cách này, lần đầu tiên được gọi nếu lời hứa được thực hiện và lần thứ hai được gọi nếu lời hứa bị từ chối có lỗi.
Các lời hứa trong mẫu mã bốn và năm không bao gồm trình xử lý thứ hai. Vì vậy, giả sử gặp phải lỗi, sẽ không có trình xử lý từ chối nào xử lý lỗi.
Nếu bạn chỉ định xác định một hàm gọi lại (còn gọi là trình xử lý hoàn thành) trong then()sau đó bạn sẽ cần lồng một catch() ở dưới cùng của chuỗi lời hứa để bắt bất kỳ lỗi nào có thể xảy ra.
Làm thế nào để sử dụng catch() Phương thức trong JS
Các catch() phương thức sẽ luôn được gọi bất cứ khi nào gặp lỗi tại bất kỳ điểm nào trong chuỗi lời hứa:
const myPromise = new Promise((resolve, reject) => {
let a = false;
setTimeout(() => {
return (a) ? resolve('a is found!'): reject('sorry, no a');
}, 300);
});
myPromise
.then(value => { console.log(value) })
.catch(err => { console.log(err) });
Từ myPromise cuối cùng sẽ giải quyết từ chối, chức năng được xác định trong lồng nhau then() sẽ bị bỏ qua. Thay vào đó, trình xử lý lỗi trong catch() sẽ chạy, thao tác này sẽ ghi thông báo lỗi sau vào bảng điều khiển:
kết thúc
Lời hứa JavaScript là một tính năng rất mạnh giúp bạn chạy mã không đồng bộ trong JavaScript. Trong hầu hết, nếu không muốn nói là tất cả, các cuộc phỏng vấn cho các vai trò sử dụng JavaScript, người phỏng vấn của bạn có thể sẽ đặt câu hỏi về lời hứa.
Trong bài viết này, tôi đã giải thích một lời hứa đơn giản là gì và tôi đã chỉ ra cách sử dụng thực tế cơ bản của nó với một số ví dụ về mã.
Tôi hy vọng bạn có một cái gì đó hữu ích từ bài viết này. Nếu bạn thích các hướng dẫn liên quan đến lập trình như thế này, bạn nên xem blog của tôi. Tôi thường xuyên xuất bản các bài viết về phát triển phần mềm ở đó.
Cảm ơn bạn đã đọc và hẹn gặp lại.
P/S: Nếu bạn đang học JavaScript, tôi đã tạo một Sách điện tử dạy 50 chủ đề về JavaScript bằng các ghi chú kỹ thuật số được vẽ bằng tay. Kiểm tra nó ra ở đây.
