Sử dụng Promise trong ES6

Giới thiệu nội dung bài viết

Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người về promise của ES6. Lần lượt giới thiệu và và đi qua các ví dụ về promise được sử dụng trong ES6.

1. Giới thiệu về promise

Trong Javascript thì promise là một đối tượng (object) được trả về từ phương thức nhưng giá trị này bạn hy vọng sẽ nhận được trong tương lai chứ không phải lúc gọi hàm sẽ nhận được ngay. Bởi vì giá trị promise sẽ được trả về trong tương lai nên nó rất thích hợp với các tính năng không đồng bộ hoặc gọi cách khác là bất đồng bộ (asynchronous).

Đồng bộ (synchronous) có nghĩa là làm tuần tự theo một quy trình làm bước A xong mới được làm bước B và C. Còn không đồng bộ (asynchronous) thì không quan tâm thứ tự có thể làm A và B cùng lúc. Cái nào xong trước thì mình sẽ nhận giá trị trước, mình có thể làm song song nhiều việc cùng 1 lúc.

Ví dụ đơn giản về Promise như, Anh muốn hoàn thành khoá học javascript trong tháng tới. Như vậy trong tương lai tháng tới anh không biết chắc là mình sẽ có đủ thời gian và nổ lực để hoàn thành khoá học hay không. (Promise) Đó dạng giống như một hy vọng là anh có thể hoàn thành được khoá học.

Promise có 3 trạng thái

• Pending : anh không biết là anh có thể hoàn thành khoá học Javascript trong tháng tới không
• Fullfilll : anh đã hoàn thành khoá học javascript trong tháng tới
• Rejected : anh không học javascript nữa và bỏ luôn ý định hoàn thành trong tháng tới

Một promise sẽ bắt đầu bằng trạng thái Pending để nói rằng Promise đó chưa xong. Cuối cùng của một promise sẽ ở trạng thái Fullfill (hoàn thành) hoặc Rejected (bỏ qua không làm).

2. Tạo một promise

Để tạo 1 promise chúng ta sử dụng new một đối tượng Promise trong ES6 như sau.

1
2
3
4
5
6
7
8
9
let completed = true;

let learnJS = new Promise(function (resolve, reject) {
    if (completed) {
        resolve("I have completed learning JS.");
    } else {
        reject("I haven't completed learning JS yet.");
    }
});

Bước 1 : chúng ta tạo Promise bằng toán tử new new Promise. Trong hàm dựng (constructor) của Promise chúng ta định nghĩa 1 function có 2 tham số là resolve và reject như sau Promise(function (resolve, reject).

Bước 2 : khi mình chạy chương trình nếu mình gọi hàm resolve nghĩa là Promised đã hoàn thành và trả về kết quả (fullfil)

Bước 3 : khi mình chạy chương trình nếu mình gọi hàm reject nghĩa là Project không thành công (reject)

3. Ví dụ promise

Anh có ví dụ như sau. Anh khai báo biến completed là true, tiếp đến anh gọi hàm setTime chờ 3s

1
2
3
4
5
6
7
8
9
10
11
let completed = true;

let learnJS = new Promise(function (resolve, reject) {
    setTimeout(() => {
        if (completed) {
            resolve("I have completed learning JS.");
        } else {
            reject("I haven't completed learning JS yet.");
        }
    }, 3 * 1000);
});

Khi chương trình chạy anh sẽ thấy promise ở trạng thái pending .

Sau khi chờ 3s thì anh sẽ nhận được kết quả là status của Promise là resolved và giá trị nhận được là “I have completed learning JS.”

Bây giờ nếu anh muốn thấy kết quả reject thì anh thay đổi giá trị complete thành false như sau.

1
2
3
4
5
6
7
8
9
10
11
let completed = false;

let learnJS = new Promise(function (resolve, reject) {
    setTimeout(() => {
        if (completed) {
            resolve("I have completed learning JS.");
        } else {
            reject("I haven't completed learning JS yet.");
        }
    }, 3 * 1000);
});

Khi chương trình chạy anh sẽ thấy promise ở trạng thái pending .

Sau khi chờ 3s thì anh sẽ nhận được kết quả là status của Promise là resolved và giá trị nhận được là “I haven’t completed learning JS yet.”

Như vậy từ khoá resolve sẽ chuyển một Promise về trạng thái fullfil và reject sẽ chuyển promise về trạng thái rejected

4. Lấy giá trị từ promise

Promise là một đối tượng được trả về cho nên để lấy được giá trị có trong Promise chúng ta sử dụng phương thức then() với cú pháp như sau.

1
promiseObject.then(onFulfilled, onRejected);promiseObject.then(onFulfilled, onRejected);

Anh có ví dụ như sau. Anh sẽ tạo ra một Promise

1
2
3
4
5
6
7
8
9
10
11
function makePromise(completed) {
    return new Promise(function (resolve, reject) {
        setTimeout(() => {
            if (completed) {
                resolve("I have completed learning JS.");
            } else {
                reject("I haven't completed learning JS yet.");
            }
        }, 3 * 1000);
    });
}

Anh sẽ lấy kết quả của Promise trả về bằng phương thức then()

1
2
3
4
5
6
let learnJS = makePromise(true);

learnJS.then(
    success => console.log(success),
    reason => console.log(reason)
);

Trong trường hợp khi Promise bị reject chúng ta có thể dùng phương thức catch để bắt lại đối tượng Promise như sau

1
2
3
learnJS.catch(
    reason => console.log(reason)
);

Thỉnh thoảng nếu chúng ta muốn thực hiện một đoạn code cho dù Promise thành công hay không thành công thì ta sử dụng finally như sau.

1
2
3
4
5
6
7
8
9
10
function createApp() {
    // ...
}

learnJS
    .then(success => console.log(success))
    .catch(reason => console.log(reason))
    .finally(() => createApp());

    

5. Demo Video

Play

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments