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ụ

pending

Ư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é.

• JavaScript
• Async
• Await
• Callback
• Promise