Tìm hiểu về Promise trong JavaScript

Tìm hiểu về Promise trong JavaScript

Anh NguyễnBạn nghĩ gì về bài viết này?

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? Trong nhiều trường hợp thực hiện Callback Function thì sẽ dễ xảy ra lỗi Callback Hell, nghĩa là gọi callback quá nhiều và lồng nhau nên dẫn đến không kiểm soát được chương trình hoặc bộ nhớ không đủ để hoạt động.

Để giải quyết vấn đề này một package đượ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é!

Promise trong JavaScript

Một object Promise trong JavaScript đại diện cho một giá trị ở thời điểm hiện tại có thể chưa tồn tại, nhưng sẽ được xử lý và có giá trị vào một thời gian nào đó trong tương lai. Việc này sẽ giúp bạn viết các dòng code 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 liệu mình có nhận được chiếc điện thoại đó cho đế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 Promise. Một Promise có ba trạng thái, đó là:

  • Pending: Bạn không biết liệu bạn có nhận được chiếc điện thoại đó không
  • Fulfilled: Mẹ bạn vui, mẹ mua cho bạn một chiếc điện thoại mới
  • Rejected: Mẹ không vui, mẹ không mua điện thoại cho bạn
Tìm hiểu về Promise trong JavaScript

Trong đó hai trạng thái Reject và Fulfilled ta gọi là Settled, 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 Promise 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 một Promise tổng quát:

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 đối tượng Promise và truyền vào đó một hàm callback. Hàm callback này sẽ nhận 2 tham số, trong đó:

  • resolve là một hàm callback xử lý cho hành động thành công
  • reject là một hàm callback xử lý cho hành động thất bại

Tất cả các code bất đồng bộ sẽ nằm trong hàm callback này. Nếu mọi thứ thành công, Promise sẽ được hoàn thành và hàm resolve sẽ được gọi. Trong trường hợp có lỗi, hàm reject sẽ được gọi với một đối tượng Error, nhằm xác định rằng Promise này đã không thành công.

Hãy xem qua ví dụ này:

// 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 Promise trong JavaScript, 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)

Hãy chạy thử đoạn code trên và xem kết quả!

Nếu isMomHappy = true kết quả nhận được sẽ như hình

Tìm hiểu về Promise trong JavaScript

Còn nếu isMomHappy = false

Tìm hiểu về Promise trong 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ứa với em của bạn rằng sẽ khoe cho cậu ta chiếc điện thoại mới khi mẹ mua cho bạn chiếc điện thoại đó.

Đó là một Promise khác, hãy xem đoạn code 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)

Hãy nối những Promise với nhau. 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 nắm vững nó, bạn có thể viết code 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 giá trị sẽ được trả về sau đó trong tương lai.

Cảm ơn bạn đã xem bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận