Xử lý bất đồng bộ với callback, promise, và async/await trong JavaScript

Xử lý bất đồng bộ với callback, promise, và async/await trong JavaScript

Bất đồng bộ là một khái niệm quan trọng trong lập trình, đặc biệt là trong các ứng dụng web và xử lý tác vụ như tải dữ liệu từ máy chủ, đọc file từ hệ thống, hay các thao tác không thể hoàn thành ngay lập tức. JavaScript có nhiều cách để xử lý bất đồng bộ, bao gồm callback, promise, và async/await. Mỗi phương pháp có những ưu và nhược điểm khác nhau, phù hợp với từng trường hợp cụ thể.

1. Callback

Callback là cách xử lý bất đồng bộ truyền thống nhất trong JavaScript. Một callback đơn giản là một hàm được truyền như tham số và được gọi khi một tác vụ bất đồng bộ hoàn thành.

Ví dụ về callback:

function fetchData(callback) {
    setTimeout(() => {
        callback("Dữ liệu đã tải xong");
    }, 1000);
}

fetchData((result) => {
    console.log(result);
});

Ở đây, hàm fetchData mô phỏng một tác vụ bất đồng bộ (sử dụng setTimeout), và khi tác vụ này hoàn tất, nó gọi callback được truyền vào.

Nhược điểm của callback:

• Callback Hell: Khi các callback lồng nhau, mã nguồn có thể trở nên rối rắm và khó đọc, gọi là “Callback Hell”.

doSomething(function(result1) {
    doSomethingElse(result1, function(result2) {
        doAnotherThing(result2, function(result3) {
            doFinalThing(result3, function(result4) {
                console.log('Kết quả cuối cùng: ', result4);
            });
        });
    });
});

• Xử lý lỗi phức tạp: Việc bắt và xử lý lỗi trong callback yêu cầu nhiều công đoạn hơn, làm mã nguồn dễ bị rối.

2. Promise

Promise ra đời để giải quyết vấn đề của callback. Promise đại diện cho một giá trị trong tương lai mà bạn có thể xử lý khi nó có sẵn (thành công hoặc thất bại).

Ví dụ về Promise:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;
            if (success) {
                resolve("Dữ liệu đã tải xong");
            } else {
                reject("Có lỗi xảy ra");
            }
        }, 1000);
    });
}

fetchData()
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.error(error);
    });

Ưu điểm của Promise:

• Xử lý tuần tự: Các tác vụ bất đồng bộ có thể được nối chuỗi bằng then, làm cho mã nguồn dễ hiểu hơn.
• Xử lý lỗi dễ dàng: Bất kỳ lỗi nào trong chuỗi Promise đều có thể được bắt trong catch.

Nhược điểm:

• Phức tạp hơn callback trong trường hợp đơn giản.
• Cú pháp then/catch dài: Nếu có nhiều promise lồng nhau, then và catch vẫn có thể làm mã dài dòng.

3. Async/Await

Async/Await được giới thiệu trong ECMAScript 2017 (ES8) và là cách xử lý bất đồng bộ mới nhất, dựa trên Promise. Nó cho phép bạn viết mã bất đồng bộ giống như mã đồng bộ, dễ đọc và dễ hiểu hơn.

Ví dụ với Async/Await:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;
            if (success) {
                resolve("Dữ liệu đã tải xong");
            } else {
                reject("Có lỗi xảy ra");
            }
        }, 1000);
    });
}

async function getData() {
    try {
        const result = await fetchData();
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

getData();

Ưu điểm của Async/Await:

• Dễ đọc: Mã nguồn trông như mã đồng bộ, không còn chuỗi then dài dòng.
• Xử lý lỗi đơn giản: Sử dụng try/catch dễ hiểu hơn so với việc xử lý lỗi qua catch trong promise.

Nhược điểm:

• Chỉ hoạt động với Promise: Bạn vẫn phải sử dụng promise dưới nền.
• Xử lý song song phức tạp hơn: Nếu bạn muốn chạy nhiều promise đồng thời, cần kết hợp với Promise.all.

Khi nào nên sử dụng từng phương pháp?

• Callback: Phù hợp với các tác vụ đơn giản hoặc cần xử lý ngay lập tức mà không cần lồng nhiều callback.
• Promise: Thích hợp khi bạn có nhiều tác vụ bất đồng bộ tuần tự cần xử lý và muốn tránh "Callback Hell".
• Async/Await: Được ưu tiên khi bạn muốn mã nguồn dễ đọc, đặc biệt trong các tác vụ có sự phụ thuộc và cần xử lý lỗi một cách dễ dàng.

Kết luận

Mỗi phương pháp xử lý bất đồng bộ có ưu và nhược điểm riêng. Việc chọn phương pháp nào phụ thuộc vào độ phức tạp của tác vụ và sự ưu tiên về cấu trúc mã nguồn. Trong thực tế, async/await hiện là phương pháp được ưa chuộng nhất vì tính dễ đọc và gọn gàng của nó. Tuy nhiên, bạn vẫn cần hiểu rõ về callback và promise, vì chúng là nền tảng của bất đồng bộ trong JavaScript.