Trong bài viết này, ta sẽ cùng tìm hiểu về các từ khóa async và await trong JavaScript cùng với sự trợ giúp của các ví dụ dẫn chứng.
Từ khóa async trong JavaScript
Ta sẽ sử dụng từ khóa asyncvới một hàm để biểu thị rằng hàm đó là một hàm không đồng bộ. Hàm có sử dụng từ khóa async sẽ trả về một Promise.
Cú pháp của hàm async như sau:
|
1 2 3 |
async function tên_hàm(Tham số) { // Đoạn mã } |
Ví dụ:
|
1 2 3 4 5 |
async function vi_du() { console.log('Hàm async'); return Promise.resolve(1); } vi_du(); |
Kết quả:
|
1 2 |
Hàm async Promise {<pending>} |
Trong chương trình trên, từ khóa async được sử dụng trước hàm để biểu thị rằng hàm này là không đồng bộ. Vì hàm trả về một Promise, ta có thể sử dụng phương thức then() như sau.
|
1 2 3 4 5 6 7 |
async function vi_du() { console.log('Hàm async'); return Promise.resolve(1); } vi_du().then(function() { console.log("Xử lý"); }); |
Trong chương trình trên, hàm vi_du() được giải quyết và phương thức then() được thực thi.
Từ khóa await trong JavaScript
Từ khóa awaitđược sử dụng bên trong hàm có sử dụng từ khóa async để đợi một thao tác không đồng bộ.
Cú pháp để sử dụng await như sau:
|
1 |
let a = await promise; |
Công dụng của từ khóa await là tạm dừng hàm không đồng bộ cho đến khi Promise trả về giá trị kết quả (giải quyết hoặc từ chối).
Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 |
let promise = new Promise(function (resolve, reject) { setTimeout(function () { resolve('Xử lý xong')}, 1000); }); async function vi_du() { let kq = await promise; console.log(kq); console.log("Xong"); } vi_du(); |
Kết quả:
|
1 2 3 |
Promise {<pending>} Xử lý xong Xong |
Trong chương trình trên, một đối tượng Promise được tạo và nó sẽ được giải quyết sau 1000 mili giây (tương đương với 1 giây). Ở đây, hàm vi_du() sử dụng với từ khóa async. Từ khóa await đợi Promise được hoàn thành (hoàn thành xong hoặc từ chối). Do đó, chuỗi ký tự ‘Xong’ chỉ được hiển thị sau khi biến kq được trả về. Trong chương trình trên, nếu await không được sử dụng, chuỗi ký tự ‘Xong’ sẽ hiển thị trước khi Promise được giải quyết.
Chú ý: Ta chỉ có thể sử dụng await bên trong các hàm không đồng bộ.
Hàm async cho phép phương thức không đồng bộ được thực thi một cách đồng bộ.
Xử lý lỗi
Trong khi sử dụng hàm không đồng bộ, ta sẽ viết đoạn mã theo cách đồng bộ. Và ta cũng có thể sử dụng phương thức catch() để xử lý lỗi.
Cú pháp:
|
1 2 3 |
Hàm_không_đồng_bộ().catch( //Xử lý ) |
Cách khác mà ta có thể xử lý lỗi là sử dụng khối try và catch.
Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
let promise = new Promise(function (resolve, reject) { setTimeout(function () { resolve('Xử lý xong')}, 1000); }); async function vi_du() { try { let kq = await promise; console.log(kq); } catch(e) { console.log(e); } } vi_du(); |
Trong chương trình trên, ta đã sử dụng khối try và 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à nếu chương trình đưa ra một lỗi, nó sẽ chuyển đến khối catch.
Lợi ích của việc sử dụng hàm async
- Đoạn mã sẽ trở nên dễ đọc hơn so với việc sử dụng một hàm Callback hoặc một Promise.
- Xử lý lỗi đơn giản hơn.
- Gỡ lỗi dễ dàng hơn.
Chú ý: Hai từ khóa async và await này đã được giới thiệu trong phiên bản JavaScript mới hơn (ES8). Một số trình duyệt cũ hơn có thể không hỗ trợ việc sử dụng async và await.
Trên đây là khái niệm và ví dụ cơ bản về async và await trong JavaScript. Hy vọng mọi người có thể áp dụng vào trong chương trình của mình. Mọi người hãy tiếp tục theo dõi các bài tiếp theo và cập nhật các bài mới nhất trên tek4 nhé!
P/s: Cảm ơn mọi người đã tin tưởng tek4!
