Xin chào, nếu đã từng lập trình với JavaScript, chắc hẳn bạn đã từng nghe qua hoặc sử dụng Callback Function hay Promise trong JavaScript rồi đúng không?
Để giải quyết vấn đề này, một gói được đưa vào từ ES6, chính là Promise trong JavaScript
Hãy cùng mình tìm hiểu Promise trong JavaScript qua bài viết này nhé
Lời hứa trong JavaScript
Một đối tượng Promise trong JavaScript đại diện cho một giá trị ở thời điểm hiện tại không thể tồn tại, nhưng sẽ được xử lý và có giá trị vào một thời điểm nào đó trong tương lai. Việc làm này sẽ giúp bạn viết các dòng mã xử lý không đồng bộ trông có vẻ đồng bộ hơn
Ví dụ. “Hãy tưởng tượng bạn là một đứa trẻ. Mẹ bạn hứa với bạn rằng bà ấy sẽ mua cho bạn một chiếc điện thoại mới vào tuần tới. ”
Bạn không biết mình đã nhận được chiếc điện thoại đó để đến tuần sau hay không. Mẹ của bạn có thể mua cho bạn một chiếc điện thoại hoàn toàn mới hoặc không. Điều cốt lõi ở đây là việc mua điện thoại chưa tồn tại ở thời điểm mẹ bạn hứa mua cho bạn
Đó là một lời hứa. One Promise has ba status, that is
- Chưa giải quyết. You don't know you have got a phone that not
- Hoàn thành. Mẹ vui, mẹ mua cho con chiếc điện thoại mới
- Phế phẩm. Mẹ không vui, mẹ không mua điện thoại cho con
Trong đó hai trạng thái Từ chối và Đã thực hiện ta gọi là Đã giải quyết, tức là đã xử lý xong
Tìm hiểu thêm về bất đồng bộ trong JavaScript tại đây
Tạo một lời hứa trong JavaScript
Bây giờ ta sẽ tìm hiểu về cách khởi tạo Promise
Dưới đây là cách một cú pháp tạo ra một lời hứa tổng thể
Code language: JavaScript [javascript]
new Promise[function [resolve, reject] { .. } ];
Chúng ta bắt đầu với việc khởi tạo một Promise đối tượng và truyền vào đó một hàm gọi lại. Hàm gọi lại này sẽ nhận 2 tham số, trong đó
- giải quyết là một hàm gọi lại xử lý cho hành động thành công
- reject là hàm callback xử lý fail cho action
Tất cả các mã bất đồng bộ sẽ nằm trong lệnh gọi lại hàm này. Nếu mọi thứ thành công, Promise sẽ được hoàn thành và hàm giải quyết sẽ được gọi. Trong trường hợp hợp nhất có lỗi, chức năng từ chối sẽ được gọi với một đối tượng Lỗi, giả định rằng lời hứa này đã không thành công
Please view via this ví dụ
Code language: JavaScript [javascript]
// Part 1 var isMomHappy = false; // Promise var willIGetNewPhone = new Promise[ function [resolve, reject] { if [isMomHappy] { var phone = { brand: 'Samsung', color: 'Màu Trắng' }; resolve[phone]; // fulfilled } else { var reason = new Error['Mẹ không vui']; reject[reason]; // reject } } ];
Thực hiện Promise trong JavaScript
Bây giờ chúng ta đã có một Lời hứa trong JavaScript, vì vậy hãy sử dụng nó
Code language: JavaScript [javascript]
var willIGetNewPhone = .. // tiếp tục từ part 1 // gọi promise của bạn var askMom = function [] { willIGetNewPhone .then[function [fulfilled] { // yay, bạn đã có điện thoại mới console.log[fulfilled]; // output: { brand: 'Samsung', color: 'Màu Trắng' } }] .catch[function [error] { // oops, mẹ đã không mua điện thoại cho bạn :[[ console.log[error.message]; // output: 'Mẹ không vui.' }]; }; askMom[];
Vui lòng chạy đoạn mã thử nghiệm trên và xem kết quả
If isMomHappy = true results will as the picture
Còn nếu isMomHappy = false
Nối nhiều Promise trong JavaScript
Sẽ có những lúc chúng ta muốn nối nhiều Promise trong JavaScript với nhau
Tiếp tục với ví dụ trên. Giả sử bạn hẹn hò với em của bạn rằng sẽ khoe cho bạn ta chiếc điện thoại mới khi mẹ mua cho bạn chiếc điện thoại đó
Đó là một lời hứa khác, hãy xem đoạn mã bên dưới
Code language: JavaScript [javascript]
// 2nd promise var showOff = function [phone] { return new Promise[ function [resolve, reject] { var message = 'Này em trai, Anh có một chiếc điện thoại ' + phone.brand + ' ' + phone.color+ ' mới'; resolve[message]; } ]; };
Please connect the Promises with together. Bạn, em trai, chỉ có thể bắt đầu lời hứa showOff sau lời hứa willIGetNewPhone
Code language: JavaScript [javascript]
var askMom = function [] { willIGetNewPhone .then[showOff] // chain it here .then[function [fulfilled] { console.log[fulfilled]; // output: 'Này em trai, Anh có một chiếc điện thoại Samsung màu trắng mới.' }] .catch[function [error] { // oops, mẹ đã không mua điện thoại cho bạn :[[ console.log[error.message]; // output: 'Mẹ không vui' }]; };
Tổng kết
Trên đây chỉ là những giới thiệu cơ bản của mình về Promise trong JavaScript. Khi ôm nó, bạn có thể viết mã xử lý các thao tác bất đồng bộ một cách dễ dàng. Chúng ta có thể xử lý như bình thường mà không cần quan tâm đến giá trị sẽ được trả lại sau đó trong tương lai