Khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Dưới đây là sự khác biệt giữa Promise, Callback, và Async/Await trong JavaScript với hướng dẫn chi tiết về cách sử dụng chúng.

1. Callback

Khái Niệm

Callback là một hàm được truyền vào một hàm khác như một đối số và được gọi khi hàm đó hoàn thành công việc của nó. Đây là cách cũ để xử lý bất đồng bộ trong JavaScript.

Ví Dụ

function doSomething(callback) {
    setTimeout(() => {
        console.log('Đã hoàn thành công việc');
        callback(); // gọi callback sau khi công việc hoàn thành
    }, 1000);
}

doSomething(() => {
    console.log('Callback được gọi');
});

Nhược Điểm

• Callback Hell (Nghịch lý Callback): Khi có nhiều hàm bất đồng bộ lồng nhau, mã trở nên khó đọc và bảo trì.
• Quản lý lỗi: Xử lý lỗi có thể trở nên phức tạp khi sử dụng nhiều callback.

2. Promise

Khái Niệm

Promise là một đối tượng đại diện cho giá trị có thể có ở hiện tại hoặc trong tương lai. Nó có thể ở một trong ba trạng thái: pending (đang chờ), fulfilled (hoàn thành), hoặc rejected (thất bại). Promise giúp giải quyết vấn đề “Callback Hell” bằng cách cho phép bạn xử lý kết quả bất đồng bộ theo một cách dễ đọc hơn.

Ví Dụ

function doSomething() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Đã hoàn thành công việc');
            resolve(); // gọi resolve khi công việc hoàn thành
        }, 1000);
    });
}

doSomething()
    .then(() => {
        console.log('Promise đã được hoàn thành');
    })
    .catch((error) => {
        console.log('Có lỗi xảy ra: ', error);
    });

Ưu Điểm

• Dễ đọc và bảo trì: Tránh được việc lồng nhiều hàm callback.
• Xử lý lỗi tốt hơn: Có thể sử dụng catch để xử lý lỗi.

3. Async/Await

Khái Niệm

Async/Await là một cú pháp mới trong JavaScript được giới thiệu trong ES2017 (ES8) giúp làm việc với Promise dễ dàng hơn. async đánh dấu một hàm là bất đồng bộ và await chờ Promise hoàn thành.

Ví Dụ

function doSomething() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Đã hoàn thành công việc');
            resolve(); // gọi resolve khi công việc hoàn thành
        }, 1000);
    });
}

async function run() {
    try {
        await doSomething(); // chờ Promise hoàn thành
        console.log('Async/Await đã được hoàn thành');
    } catch (error) {
        console.log('Có lỗi xảy ra: ', error);
    }
}

run();

Ưu Điểm

• Cú pháp sạch hơn và dễ đọc: Thay vì chaining các phương thức .then, bạn viết mã theo cách đồng bộ.
• Quản lý lỗi dễ hơn: Sử dụng try/catch để xử lý lỗi giống như trong mã đồng bộ.

So Sánh

1. Callback
   • Ưu Điểm: Đơn giản và trực tiếp.
   • Nhược Điểm: Dễ dẫn đến Callback Hell; xử lý lỗi khó khăn hơn.
2. Promise
   • Ưu Điểm: Cải thiện quản lý bất đồng bộ, dễ đọc hơn khi sử dụng chain then và catch.
   • Nhược Điểm: Cần xử lý nhiều tầng .then, có thể vẫn gây khó khăn khi lồng nhau nhiều.
3. Async/Await
   • Ưu Điểm: Cú pháp giống như đồng bộ, dễ đọc và bảo trì hơn, xử lý lỗi trực tiếp.
   • Nhược Điểm: Yêu cầu môi trường hỗ trợ ES2017 hoặc cần biên dịch qua Babel cho các trình duyệt cũ.

Kết Luận

• Callback: Phù hợp cho các tình huống đơn giản hoặc khi làm việc với mã cũ.
• Promise: Tốt hơn cho các tình huống bất đồng bộ phức tạp, cung cấp cách dễ dàng hơn để quản lý nhiều tác vụ bất đồng bộ.
• Async/Await: Cung cấp cách tiếp cận tốt nhất cho quản lý bất đồng bộ với cú pháp đơn giản và dễ hiểu hơn.

Hy vọng hướng dẫn này giúp bạn hiểu rõ hơn về các cách xử lý bất đồng bộ trong JavaScript! Nếu bạn có thêm câu hỏi hoặc cần thông tin chi tiết hơn, đừng ngần ngại hỏi nhé.

• Async
• Await
• Callback
• JavaScript
• Promise