async await trong JavaScript là gì? nó giúp ích gì cho chúng ta

Chào các bạn, lại là homiedev đây 😁. Tiếp tục với chủ đề bất đồng bộ (asynchronous) trong JavaScript, hôm nay mình xin giới thiệu đến các bạn từ khóa async/await trong JavaScript nhé. Cùng đọc bài viết thôi nào!

Javascript async/await

Chúng ta sử dụng từ khóa async cho một hàm để thể hiện rằng hàm này là một hàm bất đồng bộ. Hàm async trả về một promise.

Cú pháp của hàm async là:

async function name(parameter1, parameter2, ...paramaterN) {
    // ...
}

Trong đó:

1. name - tên của chức năng
2. parameters - tham số được truyền cho hàm

Ví dụ về async function:

async function f() {
    console.log('Async function.');
    return Promise.resolve('homiedev.com');
}

f(); 

Kết quả chúng ta nhận được:

Async function.
Promise {<fulfilled>: 'homiedev.com'}

Ở ví dụ trên, từ khóa async được sử dụng trước function để biểu thị rằng hàm này là bất đồng bộ (vì bên trong chúng ta xử lý bất đồng bộ).

Vì hàm này return một promise, nên có thể sử dụng method then() như sau:

async function f() {
    console.log('Async function.');
    return Promise.resolve('homiedev.com');
}

f().then(function(result) {
    console.log(result)
});

Kết quả là:

Async function.
homiedev.com

Trong ví dụ trên, khi hàm f() resolved, method then() được thực thi.

JavaScript await

Từ khóa await được sử dụng bên trong hàm async để chờ một xử lý bất đồng bộ.

Cú pháp để sử dụng await là:

let result = await promise;

Khi sử dụng từ khóa await, nó sẽ tạm dừng async function cho đến khi promise return về giá trị kết quả (resolve hoặc reject).

Ví dụ:

let promise = new Promise(function (resolve, reject) {
    // chờ sau 3 giây thì gọi resolve
    setTimeout(function () {
      resolve('Promise resolved')
    }, 3000); 
});

// async function
async function asyncFunc() {
    // chờ cho đến khi promise resolve
    let result = await promise; 

    console.log(result);
    console.log('homiedev.com');
}

// gọi async function
asyncFunc();

Kết quả ví dụ trên:

Promise resolved
homiedev.com

Ở ví dụ trên, object Promise được tạo và nó sẽ được resolve sau 3 giây. Ở đây, hàm asyncFunc() là một async function.

Trong hàm async, chúng ta sử dụng từ khóa await để đợi promise hoàn thành (resolve hoặc reject). Bạn có thể hiểu là quá trình này giống khi chúng ta đứng đợi ở trạm xe bus, chúng ta sẽ đứng chờ 5 - 10 phút và khi xe bus đến chúng ta sẽ lên xe và đi tới một địa điểm khác. Quá trình này dừng khi chúng ta đến địa điểm cần đến ^^.

Thêm nữa, dòng chữ homiedev.com chỉ được hiển thị sau khi giá trị promise được trả cho biến result ở ví dụ trên.

Nếu ta không sử dụng await, dòng chữ homiedev.com sẽ hiển thị trước khi Promise resolve.

Chúng ta chỉ có thể sử dụng await bên trong async function.

Chúng ta cùng xem tiếp một ví dụ sử dụng nhiều promise nhé!

Ví dụ:

let promise1;
let promise2;
let promise3;

async function asyncFunc() {
    let result1 = await promise1;
    let result2 = await promise2;
    let result3 = await promise3;

    console.log(result1);
    console.log(result2);
    console.log(result3);
    console.log('homiedev.com');
}

Trong đoạn code trên, await sẽ chờ từng promise hoàn thành. Và homiedev.com sẽ được in ra cuối cùng 😉.

Xử lý lỗi

Trong khi sử dụng async function, chúng ta xử lý code bên trong theo kiểu đồng bộ. Nếu có lỗi trong quá trình xử lý thì chúng ta có thể sử dụng method catch() để bắt lỗi.

Ví dụ:

asyncFunc().catch(
    // Xử lý lỗi tại đây
)

Chúng ta còn một cách khác đó là xử lý lỗi sử dụng try ... catch.

Ví dụ:

let promise = new Promise(function (resolve, reject) {
    setTimeout(function () {
      reject('Lỗi mất rồi !😢');
    }, 3000); 
});

// async function
async function asyncFunc() {
    try {
        // promise trả về lỗi ngay sau đó sẽ xử lý lỗi ở catch
        let result = await promise; 

        console.log(result);
    }   
    catch(error) {
        // xử lý lỗi tại đây
        console.log(error);
    }
}

// gọi async function
asyncFunc(); // Lỗi mất rồi !😢

Trong ví dụ trên, chúng ta đã sử dụng try ... catch để xử lý các lỗi. Nếu chương trình chạy thành công, nó sẽ chuyển đến khối try. Và chương trình throw ra một lỗi, nó sẽ chuyển đến khối catch. Ở ví dụ trên promise đã reject nên chương trình sẽ chuyển sang catch.

async Function giúp được gì?

1. Giúp cho code dễ đọc hơn là sử dụng callback hay promise.
2. Xử lý lỗi đơn giản hơn.
3. Debug dễ dàng hơn.

Từ khóa async / await này đã được giới thiệu trong bản JavaScript (ES8). Một số trình duyệt cũ hơn có thể không hỗ trợ việc sử dụng async / await. Các bạn có thể tìm hiểu tại đây.