Promise chain là gì?

Đôi khi, bạn muốn thực hiện hai hoặc nhiều hoạt động không đồng bộ (asynchronous operation) có liên quan, trong đó hoạt động tiếp theo bắt đầu với kết quả từ bước trước đó. Ví dụ:

Đầu tiên, hãy tạo một new promise mà sẽ resolve số 10 sau 3 giây:

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(10);
    }, 3 * 100);
});

Lưu ý rằng hàm (function) setTimeout() mô phỏng một hoạt động không đồng bộ.

Sau đó, gọi (invoke) phương thức (method) then() của promise:

p.then((result) => {
    console.log(result);
    return result * 2;
});

Callbackđược truyền (pass) cho phương thức then() và phương thức này thực thi sau khi promise được resolve. Trong callback, chúng ta hiển thị kết quả của promise và trả về một giá trị mới nhân với hai (result * 2).

Vì phương thức then() trả về (return) một new Promise, bạn có thể gọi phương thức then() trên Promise được trả về như sau:

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(10);
    }, 3 * 100);
});

p.then((result) => {
    console.log(result);
    return result * 2;
}).then((result) => {
    console.log(result);
    return result * 3;
});

Output:

10
20

Trong ví dụ này, giá trị trả về (return value) trong phương thức then() đầu tiên được truyền cho phương thức then() thứ hai. Bạn có thể tiếp tục gọi phương thức then() liên tiếp như sau:

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(10);
    }, 3 * 100);
});

p.then((result) => {
    console.log(result); // 10
    return result * 2;
}).then((result) => {
    console.log(result); // 20
    return result * 3;
}).then((result) => {
    console.log(result); // 60
    return result * 4;
});

Output:

10
20
60

Cách chúng ta gọi các phương thức then() như thế này thường được gọi là chuỗi promise (promise chain).

Hình ảnh sau đây minh họa chuỗi promise:

Khi bạn gọi phương thức then() nhiều lần trên một promise, nó không phải là chuỗi promise (promise chain). Ví dụ:

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(10);
    }, 3 * 100);
});

p.then((result) => {
    console.log(result); // 10
    return result * 2;
})

p.then((result) => {
    console.log(result); // 10
    return result * 3;
})

p.then((result) => {
    console.log(result); // 10
    return result * 4;
});

Output:

10
10
10

Trong ví dụ này, chúng tôi có nhiều handler cho một promise. Những handler này không có mối quan hệ. Ngoài ra, chúng thực thi độc lập và không chuyển kết quả từ promise này sang promuse khác như chuỗi promise (promise chain) ở trên.

Hình ảnh sau đây minh họa một promise có nhiều handler: