Video học lập trình mỗi ngày

Promise javascript cung cấp nhiều loại quá anh em ơi. Cách đây 1 mùa tết thì ES2021 có giới thiệu những tính năng mới cho cộng động các nhà phát triển javascript. Trong đó có một tính năng mà lúc đầu tôi nghĩ đó là dư thừa đó là Promise.any(), nhưng khi sử dụng nó một thời gian tôi nhận thấy rằng có nó là điều quá tuyệt vời. Chính vì vậy, bài viết này có lẽ là tốt nhất để các bạn hiểu rồi đây.

Từ callback tới promise javascript

Dù bạn có biết về lịch sử phát triển callback, tới promise rồi tới async/await hay không thì tôi vẫn phải có nhiệm vụ giới thiệu lại một chút. Chỉ khác là đây là callback function. 

Chúng ta lấy một hoàn cảnh thực tế để viết một ví dụ. Đó là thời CoVid 19 này do thất nghiệp nhiều qúa, cho nên bạn A đói quá đi vay tiền bạn B. Trong lúc nhậu nhẹt, B hứa (promise) là cho A vay một số tiền, sống qua này. Và ngày mượn tiền đã tới. 

Đầu tiên tôi tạo một Promise đơn giản nhất:

const firstPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Đây là Tiền tao cho mượn 30 Triệu')
    }, 3000)
});

Code trên tạo một Promise có hai tham số được đưa vào đó là resolve và reject. Và cụ thể trong trường hợp này là B đồng ý cho mượn. Sau khi cho A mượn tiền thì Vợ B là một người con gái xinh đẹp, đến bên A và nói. Vào đây em đưa cho Anh. Nghĩa là giải ngân đó. 

Code tương tự như sau:

const firstPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Đây là Tiền tao cho mượn 30 Triệu')
    }, 3000)
});

firstPromise.then((data) => {
  console.log(`Vợ B đưa tiền cho A: ${data}`)
});

Giả sử B từ chối thì code sẽ như thế nào, tương tự với việc resolve thì reject cũng vậy mà thôi. Giả sử B từ chối, thì Vợ B cũng sẽ không giám gọi A vào phòng để đưa tiền.

const firstPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('Tao nhậu say nên không nhớ gì cả')
    }, 3000)
});

firstPromise.then((resolvedData) => {
  console.log(`Vợ B đưa tiền cho A: ${resolvedData}`)
}, (rejectedData) => {
  console.log(`Vợ B không đưa tiền cho A vì : ${rejectedData}`)
});

Lúc này kết quả là "Vợ B không đưa tiền cho A vì : Tao nhậu say nên không nhớ gì cả". Ok trên đây là tất cả những gì mà bạn muốn biết về Promise javascript. Đừng nói với tôi là bạn chưa hiểu...

Promise.any()

Còn về trường hợp sử dụng của Promise.any thì nó cũng như vậy nhưng nó mở rộng quy mô hơn một chút. Và nó khác với Promise.race()... 

Sau đây là câu chuyện. Trong cuộc nhậu thì 3 thằng A, B, C vì khó khăn quá nên xin mượn tiền của D. Và D chưa đồng ý, vì có ít tiền và chỉ cho một người mượn mà thôi. Nên mới ra điều kiện là, ngày mai tao đi công tác chỉ có bạn gái ở nhà, và nếu ai có thể đến trước thì người đó được mượn tiền. Thế là ngày mai, A, B, C phóng như bay và thời gian đến khác nhau. 

Code tương tự sau đây:

const APromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("A tới trong vòng 3500 nốt nhạc")
    }, 3500)
});

const BPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("B tới trong vòng 800 nốt nhạc")
    }, 800)
});

const CPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("C tới trong vòng 300 nốt nhạc")
    }, 300)
});

Nhìn sơ qua chúng ta đã biết ai được mượn tiền rồi. Nhưng cách triển khai code dự trên promise.any() như thế nào.

const APromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("A tới trong vòng 3500 nốt nhạc")
    }, 3500)
});

const BPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("B tới trong vòng 800 nốt nhạc")
    }, 800)
});

const CPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("C tới trong vòng 300 nốt nhạc")
    }, 300)
});

Promise.any([APromise, BPromise, CPromise]).then((firstResolvedData) => {
  console.log(`Cuối cùng ai nhận tiền: ${firstResolvedData}`)
});

Kết quả cuối cùng: '"Cuối cùng ai nhận tiền: C tới trong vòng 300 nốt nhạc"' Vậy Promise.any() là một nơi có thể giải quyết một hay nhiều Promise, và thằng nào được resolve trước tiên thì dữ liệu đó được xử lý theo mỗi hoàn cảnh, mỗi điều kiện cho phép.

Tóm lại

Trên đó là ví dụ để tôi nhìn lại một khái niệm, còn các bạn có thêm một khái niệm mới. Có thể áp dụng nhiều nơi, ví dụ load ảnh cho web chẳng hạn... Ngoài ra, cũng nên tìm hiểu thêm về promise.race(), promise.all() và promise.allsettled mà vừa mới được giới thiệu cách đây không lâu.