Nên sử dụng Promise hay Async/await ?

Đã bao giờ bạn thắc mắc tại sao chúng ta đều có thể xử lý call API với Promise hoặc Async/await và call bằng cách nào thì thuận tiện hơn chưa ?
Trước kia mình hay call bằng Promise khi bắt đầu học về fetch trong javascript và sau đó mình chuyển sang dùng async await khi bắt đầu học trong các khoá học. Mình chỉ nghĩ đơn giản đó là phong cách code của mỗi người dạy khác nhau nên nếu mình quen call bằng cái gì thì mình call như vậy. Cho đến một ngày mình mày mò tối ưu những dòng code mà mình gõ, mình chợt đặt ra câu hỏi rằng "Dùng cách nào call thì sẽ tối ưu hơn nhỉ?"
Đó cũng chính là lý do mà mình viết bài viết ngày hôm nay nhằm chia sẻ cho bạn về câu trả lời của mình cho câu hỏi này.

Mình bắt đầu google search như sau "Có bất kỳ lợi ích nào về việc sử dụng Promise hơn async await?" và mình có đọc được một ví dụ rất hay như sau.
Hãy bắt đầu

const Y = (y) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(y)
        }, 1000)
    })
}

const X = (x) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(x)
        }, 2000)
    })
}

async function test() {
    console.time('TIME_PROCESS')
    const _y = await Y(10)
    const _x = await X(20)
    console.timeEnd('TIME_PROCESS')
    return _x + _y
}

test().then((result) => {
    console.log(result)
})

chạy file và kết quả trả về

Như vậy chúng ta phải mất 3s để hoàn thành việc tính toán cho phép cộng trên. Lý do là await sau đã bị phụ thuộc vào await trước.
Tuy nhiên theo logic thực tế chúng ta sẽ bị sai, x và y là hai phương thức độc lập khác nhau, chúng ta không thể bắt y chờ cho x cũng như không thể bắt x chờ cho y để thực hiện phép tính.
Đây chính là trường hợp chúng ta phải dùng Promise
sửa lại đoạn code một chút

Kết quả trả về chỉ còn

Hoặc chúng ta cũng có thể viết như này

Kết quả trả về cũng chỉ còn 2s

Như vậy các bạn đã tự rút ra được câu trả lời cho vấn đề mình đặt ra hồi đầu bài viết rồi chứ.
Không phải theo phong cách người code mà chúng ta cần phải đặt vào từng trường hợp khác nhau. Chúng ta chỉ có thể sử dụng async await cho các tác vụ tuần tự còn độc lập thì phải dùng Promise để tối ưu rồi.

Cuối cùng mình muốn bật mí cho các bạn thêm một phương thức rất hay có tên là Promise.allSettled, các bạn có thể tìm đọc thêm để có thêm kiến thức nhé.

promise.all tương đương với const X = await promiseA + await promiseB + await promiseC;

Chúc may mắn và thành công !