JavaScript: Tổng quát về Promise (Phần 2)

[Phong Nguyễn Dương]

CHI TIẾT VỀ PROMISE

Xin chào các bạn đã quay trở lại với series về Promise trong Javascript.
Hôm nay chúng ta sẽ cùng đi tìm hiểu sâu hơn về Promise nhé.
Cùng nhắc lại một chút nhé. Đây là cú pháp cơ bản của một Promise:

new Promise((resolve, reject) => {
    console.log("Code logic");
    resolve();
    // reject();
})
.then(() => {
    // throw new Error('Something failed');
    console.log("Chạy nếu như resolve");
})
.catch(() => {
    console.log("Chạy nếu như reject");
})
.finally(() => {
    console.log("Luôn luôn chạy");
});

Code trên sẽ chạy ra:

Code logic
Chạy nếu như resolve
Luôn luôn chạy

Oke, Let's go:

I. Cặp anh em Resolve và Reject.

Để tạo ra một Promise thì anh em dùng class Promise có sẵn trong trình duyệt như sau:

const p = new Promise(
  /* executor */ function(resolve, reject) {
   
  },
)

Trong đó, executor là một hàm có hai tham số:

• resolve là hàm sẽ được gọi khi promise hoàn thành.

• reject là hàm sẽ được gọi khi có lỗi xảy ra.

Và bây giờ bạn hãy nhìn lên đoạn code mà tôi có đề cập ở đầu bài:

new Promise((resolve, reject) => {
    console.log("Code logic");
    resolve();
    // reject();
})
.then(() => {
    // throw new Error('Something failed');
    console.log("Chạy nếu như resolve");
})
.catch(() => {
    console.log("Chạy nếu như reject");
})
.finally(() => {
    console.log("Luôn luôn chạy");
});

Điều bạn thắc mắc???

• Resolve và Reject đều chạy trong Promise??
  Thì code sẽ luôn ưu tiên resolve và chạy trong then(), tức là nếu trong Promise ở code trên mà như thế này:

new Promise((resolve, reject) => {
    console.log("Code logic");
    resolve();
    reject();
})

thì kết quả vẫn sẽ là:

Code logic
Chạy nếu như resolve
Luôn luôn chạy

• Vậy dòng sau đây có có ý nghĩa gì??

// throw new Error('Something failed');

Dòng này có tác dụng bắt lỗi khi chúng ta code logic tiếp ở trong then().
Code sau dòng này ở trong then() sẽ không được chạy nữa, và nó sẽ chạy tiếp ở hàm bắt lỗi catch().
Tức là nếu code đổi thành:

new Promise((resolve, reject) => {
    console.log("Code logic");
    resolve();
    reject();
})
.then(() => {
    throw new Error('Something failed');
    console.log("Chạy nếu như resolve");
})
.catch(() => {
    console.log("Chạy nếu như reject");
})
.finally(() => {
    console.log("Luôn luôn chạy");
});

Kết quả sẽ là :

Code logic
Chạy nếu như reject
Luôn luôn chạy

Oke, vậy mọi thứ đã rõ hơn chưa, để chúng ta cùng tiếp tục hành trình nào ...

II. .then(), .catch(), .finally() có tác dụng thế nào??

Lưu ý:

• Luôn đưa vào .then() một hàm:
  Bạn thử đoán xem đoạn code sau sẽ in ra gì?

Promise.resolve(1)
  .then(2)
  .then(console.log)

và kết quả là:

1

Phương thức .then đòi hỏi tham số của nó phải là một hàm. Nếu bạn đưa vào .then() một giá trị, nó sẽ bị bỏ qua.

• Phân biệt .then(resolve, reject) và .then(resolve) .catch(reject)
  Cùng xem qua đoạn code sau nha:

new Promise((resolve, reject) => {
    console.log("Code logic");
    resolve();
    reject();
})
.then(
    resolve => {
        throw new Error('Something failed');
    },
    reject =>{
        console.log("Chạy nếu như resolve"); // không chạy đến dòng này
    }
)
.catch(() => {
    console.log("Chạy nếu như reject");
})

Kết quả là:

Code logic
Chạy nếu như reject

Hàm reject trong .then(resolve, reject) chỉ có thể bắt được lỗi từ những .then() phía trước nó, mà không thể bắt được lỗi xảy ra trong hàm resolve cùng cấp.

• Điều thú vị về .finally()
  Bên cạnh .then() và .catch(), chúng ta còn có .finally().

Phương thức này nhận vào một hàm và sẽ được kích hoạt dù cho promise trước nó hoàn thành hay xảy ra lỗi.
Bạn nhìn lại kết quả của những đoạn code chúng ta đã thử qua, dòng

console.log("Luôn luôn chạy");

trong finally() luôn luôn chạy đúng không?? đó chính là tác dụng của finally()...

III. TỔNG KẾT
Oke, vậy là trong series này, chúng ta tiếp tục hiểu sâu thêm về Promise rồi đúng không nào??
Nếu có phản hồi gì, hãy đóng góp cho chúng mình ở phía bên dưới để chúng mình bổ sung để hoàn thiện hơn nha.
Chúc bạn thực hiện và kiểm soát được Promise.
Còn bây giờ thì, xin chào và hẹn gặp lại ở các series tiếp theo.