Hàm bất đồng bộ Async Functions trong JavaScript

Giải thích:

• Hàm sayHello() được khai báo với từ khóa async.

• Nó trả về một chuỗi "Xin chào!", nhưng do đây là một async function, giá trị thực tế mà nó trả về là một Promise.

• Khi gọi sayHello(), ta có thể dùng .then() để nhận kết quả.

Bây giờ, hãy xem cách sử dụng await để đợi một Promise bên trong async function:

async function fetchData() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("Dữ liệu đã tải xong!"), 2000);
    });

    let result = await promise; // Chờ promise hoàn thành
    console.log(result);
}

fetchData(); 
// Sau 2 giây: Output: "Dữ liệu đã tải xong!"

Giải thích:

• Hàm fetchData() là một async function.

• Bên trong, nó tạo một Promise giả lập một tác vụ mất 2 giây để hoàn thành.

• await promise giúp đợi Promise hoàn thành trước khi tiếp tục thực thi lệnh tiếp theo (console.log(result)).

Như vậy, async functions giúp code trở nên dễ đọc hơn khi làm việc với các tác vụ bất đồng bộ, thay vì sử dụng callback hoặc Promise chaining rườm rà.

Cách khai báo async function trong JavaScript

Sử dụng từ khóa async trước một hàm

Trong JavaScript, một hàm bất đồng bộ (async function) được khai báo bằng cách thêm từ khóa async trước từ khóa function. Khi một hàm được khai báo là async, nó sẽ luôn trả về một Promise, ngay cả khi bên trong hàm không có một Promise nào.

Cú pháp khai báo một async function:

async function tenHam() {
    // Nội dung hàm
}

Hoặc với arrow function:

const tenHam = async () => {
    // Nội dung hàm
};

Sử dụng await để đợi kết quả của một Promise

• await chỉ có thể được sử dụng bên trong async function.

• Khi sử dụng await trước một Promise, JavaScript sẽ tạm dừng thực thi cho đến khi Promise đó được resolve (hoàn thành).

• Điều này giúp tránh sử dụng .then() hoặc callback lồng nhau, làm cho code dễ đọc hơn.

Ví dụ về await trong async function

async function getData() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("Dữ liệu đã tải xong!"), 3000);
    });

    console.log("Đang tải dữ liệu...");

    let result = await promise; // Chờ promise hoàn thành
    console.log(result); // Output sau 3 giây: "Dữ liệu đã tải xong!"
}

getData();

Giải thích:

• Hàm getData() là một async function.

• Bên trong, nó tạo một Promise giả lập quá trình tải dữ liệu mất 3 giây.

• Dòng console.log("Đang tải dữ liệu..."); chạy ngay lập tức.

• await promise giúp tạm dừng cho đến khi Promise được resolve, sau đó mới thực hiện console.log(result).

• Nhờ await, chúng ta tránh được việc sử dụng .then() hoặc callback lồng nhau.

Ví dụ về async function cơ bản

Dưới đây là một async function đơn giản trả về một giá trị:

async function sayHello() {
    return "Xin chào!";
}

// Gọi hàm và xử lý kết quả
sayHello().then(console.log); // Output: "Xin chào!"

Giải thích:

• Vì sayHello() là một async function, nên nó luôn trả về một Promise.

• Khi gọi sayHello(), chúng ta có thể sử dụng .then() để nhận kết quả.

Lưu ý:

• Nếu bạn không sử dụng await, hàm async sẽ không chờ và tiếp tục thực thi ngay lập tức.

• await chỉ có thể được sử dụng bên trong một async function, nếu sử dụng bên ngoài sẽ gây lỗi.

Cách sử dụng await trong async function trong JavaScript

await giúp xử lý Promise theo cách đồng bộ hơn

• await là một từ khóa được sử dụng để tạm dừng việc thực thi của một async function cho đến khi Promise được resolve.

• Điều này giúp code dễ đọc hơn vì nó giống như xử lý đồng bộ, nhưng thực tế vẫn là bất đồng bộ.

Ví dụ về cách xử lý Promise bằng await

Trước khi có await, chúng ta thường xử lý Promise bằng .then():

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("Dữ liệu đã tải!"), 2000);
    });
}

fetchData().then((data) => {
    console.log(data); // Output sau 2 giây: "Dữ liệu đã tải!"
});

Với await, code trở nên dễ hiểu hơn:

async function getData() {
    console.log("Bắt đầu tải dữ liệu...");
    let data = await fetchData();
    console.log(data); // Output sau 2 giây: "Dữ liệu đã tải!"
}

getData();

Lợi ích của await:

Không cần .then(), giúp code gọn gàng hơn.
Giúp tránh callback hell khi có nhiều tác vụ bất đồng bộ liên tiếp.

await chỉ có thể được sử dụng bên trong async function

Nếu sử dụng await bên ngoài một async function, JavaScript sẽ báo lỗi:

let data = await fetchData(); //  Lỗi: await is only valid in async function

async function main() {
    let data = await fetchData();
    console.log(data);
}

main();

async function fetchDataWithError() {
    try {
        let response = await fetch("https://invalid-url.com"); // URL sai
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Lỗi xảy ra:", error.message);
    }
}

fetchDataWithError();

async function fetchData() {
    let response = await fetch("https://invalid-url.com");
    return response.json();
}

fetchData()
    .then((data) => console.log(data))
    .catch((error) => console.error("Lỗi xảy ra:", error.message));

async function task1() {
    console.log("Bắt đầu task 1...");
    await new Promise(resolve => setTimeout(resolve, 2000)); // Giả lập tác vụ mất 2 giây
    console.log("Task 1 hoàn thành!");
    return "Kết quả từ task 1";
}

async function task2() {
    console.log("Bắt đầu task 2...");
    await new Promise(resolve => setTimeout(resolve, 1000)); // Giả lập tác vụ mất 1 giây
    console.log("Task 2 hoàn thành!");
    return "Kết quả từ task 2";
}

async function runTasksSequentially() {
    let result1 = await task1();
    console.log(result1);

    let result2 = await task2();
    console.log(result2);
}

runTasksSequentially();

async function runTasksInParallel() {
    console.log("Bắt đầu chạy song song...");

    let [result1, result2] = await Promise.all([task1(), task2()]);

    console.log(result1);
    console.log(result2);
}

runTasksInParallel();

function task1(callback) {
    setTimeout(() => {
        console.log("Task 1 hoàn thành!");
        callback();
    }, 2000);
}

function task2(callback) {
    setTimeout(() => {
        console.log("Task 2 hoàn thành!");
        callback();
    }, 1000);
}

task1(() => {
    task2(() => {
        console.log("Tất cả tasks hoàn thành!");
    });
});

function task1() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("Task 1 hoàn thành!");
            resolve();
        }, 2000);
    });
}

function task2() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("Task 2 hoàn thành!");
            resolve();
        }, 1000);
    });
}

task1()
    .then(() => task2())
    .then(() => console.log("Tất cả tasks hoàn thành!"));

async function runTasks() {
    await task1();
    await task2();
    console.log("Tất cả tasks hoàn thành!");
}

runTasks();