Lời hứa javascript

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

Lời hứa javascript
Lời hứa javascript

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ể

new Promise(function (resolve, reject) { .. } );

Code language: JavaScript (javascript)

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ụ

// 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 } } );

Code language: JavaScript (javascript)

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ó

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();

Code language: JavaScript (javascript)

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

Lời hứa javascript
Lời hứa javascript

Còn nếu isMomHappy = false

Lời hứa javascript
Lời hứa javascript

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

// 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); } ); };

Code language: JavaScript (javascript)

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

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' }); };

Code language: JavaScript (javascript)

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