JavaScript - 5 phút hiểu về Async/Await

[Phong Nguyễn Dương]

Những điều cần biết về Async/Await

Chào mọi người, chúng ta lại gặp nhau trong series Javascipt.
Hôm nay, chúng ta sẽ cùng tìm hiều về async await, cặp bài trùng giúp Promise hoàn hảo hơn.
Oke, Let's go :

I. Async / Await là gì?

• Async / Await là một tính năng của JavaScript:
  +) Giúp chúng ta làm việc dễ dàng hơn với các hàm bất đồng bộ.
  +) Được xây dựng trên Promises và có thể sử dụng với tất cả các Promise .

• Async - khai báo một hàm bất đồng bộ
  Tự động biến đổi một hàm thông thường thành một Promise.
  Khi gọi tới hàm async nó sẽ xử lý mọi thứ và được trả về kết quả trong hàm của nó.
  Async cho phép sử dụng Await.

• Await - tạm dừng việc thực hiện các hàm Async
  Khi được đặt trước một Promise, nó sẽ đợi cho đến khi Promise kết thúc và trả về kết quả.
  Await chỉ làm việc với Promises, nó không hoạt động với callbacks.
  Await chỉ có thể được sử dụng bên trong các hàm async.

Chúng ta cùng xem qua ví dụ sau:

async function func1() {
    console.log(1);
    var a = await 2;
    console.log(a);
}
func1();
console.log(3);

Kết quả:

1
3
2

Oke, giải thích một chút nha:

• Chúng ta có thể thấy hàm func1 được gọi và thực hiện trước câu lệnh console.log(3).
  Vậy câu lệnh đầu tiên được thực hiện là console.log(1).
• Chương trình chạy tiếp và gặp dòng lệnh await. Nó tạm dừng việc thực hiện hàm func1.
  Vậy câu lệnh thứ 2 được thực hiện là console.log(3).
• Sau khi các dòng lệnh đồng bộ đã được thực hiện hết (những câu lệnh thông thường như console.log(3)). Chương trình sẽ thực hiện đến những câu lệnh sau await (câu lệnh chờ).
  Vậy câu lệnh thứ 3 được thực hiện là console.log(2).

Và chúng ta được kết quả như trên .

II. Xử lý lỗi trong Async / Await
Ta cùng xem ví dụ sau:

async function func1() {
    try {
        var ketqua = await logicFunction();
        console.log(ketqua);
    } catch (error) {
        // lỗi của hàm logicFunction(nếu có) sẽ được in ra ở đây
        console.log(error);
    }
}
func1();

Nếu muốn bắt lỗi khi đang sử dụng async await, chỉ đơn giản , chúng ta sẽ cho chúng vào trong khối try/catch.

Mệnh đề catch sẽ xử lý các lỗi gây ra bởi các hàm bất đồng bộ hoặc bất kỳ lỗi nào chúng ta có thể đã viết bên trong khối try.

Lưu ý: Và vì các hàm async đều trả về Promises, nên chúng ta có thể bắt lỗi giống như một Promise bình thường. Như sau:

async function func1() {
        var ketqua = await logicFunction();
        console.log(ketqua);
}
func1()
.then(success)
.catch(error);

III. TỔNG KẾT
Vậy là chúng ta đã cùng nhau tìm hiểu về Async/Await.
Với việc xuất hiện của Async/Await từ ES7 (hiểu nôm na là những phiên bản của ngôn ngữ: ECMAScript), thì việc xử lý với các hàm bất đồng bộ đã được giải quyết khá triệt để.

Chúc các bạn thật thành thạo với Async/Await nha!!

Nếu có phản hồi gì, hãy để lại bình luận phía dưới để chúng mình bổ sung và hoàn thiện hơn nữa trong những bài viết tiếp theo nha!!!
Xin chào và hẹn gặp lại!!!