Chúng ta sử dụng từ khóa async với một hàm để biểu thị rằng hàm đó 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 như sau:
async function name(parameter1, parameter2, ...paramaterN) {
// statements
}
Tại đây,
- name – tên của hàm
- parameters – các tham số được truyền vào hàm
Ví dụ: Hàm Bất đồng bộ
// async function example
async function f() {
console.log('Async function.');
return Promise.resolve(1);
}
f();
Kết quả
Async function.
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 là bất đồng bộ.
Khi hàm này trả về một promise, bạn có thể sử dụng phương thức chuỗi then() như sau:
async function f() {
console.log('Async function.');
return Promise.resolve(1);
}
f().then(function(result) {
console.log(result)
});
Kết quả
Hàm Bất đồng bộ 1
Trong chương trình trên, hàm f() được giải quyết và phương thức then() được thực thi.
JavaScript await Keyword
Từ khóa await được sử dụng bên trong hàm async để chờ cho thao tác bất đồng bộ.
Cú pháp sử dụng await như sau:
let result = await promise;
Việc sử dụng await tạm dừng hàm async cho đến khi promise trả về một giá trị kết quả (hoặc bị từ chối). Ví dụ,
// a promise
let promise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('Promise resolved')}, 4000);
});
// async function
async function asyncFunc() {
// wait until the promise resolves
let result = await promise;
console.log(result);
console.log('hello');
}
// calling the async function
asyncFunc();
Kết quả
Promise resolved
hello
Trong chương trình trên, một đối tượng Promise được tạo và nó được giải quyết sau 4000 mili giây. Ở đây, hàm asyncFunc() được viết bằng cách sử dụng hàm async.
Từ khóa await đợi cho promise hoàn tất (hoặc từ chối).
let result = await promise;
Do đó, “hello” chỉ được hiển thị sau khi giá trị promise sẵn sàng cho biến kết quả.
Trong chương trình trên, nếu không sử dụng await, “hello” sẽ được hiển thị trước khi Promise được giải quyết.
Hoạt động của hàm async/await
Chú ý : Bạn chỉ có thể sử dụng await bên trong các hàm async.
Hàm async cho phép phương thức bất đồng bộ được thực thi một cách có vẻ như đồng bộ. Mặc dù thao tác là bất đồng bộ, nhưng có vẻ như thao tác được thực hiện theo cách đồng bộ.
Điều này có thể hữu ích nếu có nhiều promise trong chương trì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(result1);
console.log(result1);
}
Trong chương trình trên, await chờ cho mỗi promise hoàn thành.
Xử lý Lỗi
Trong khi sử dụng hàm async, bạn viết mã theo cách đồng bộ. Bạn cũng có thể sử dụng phương thức catch() để bắt lỗi. Ví dụ,
asyncFunc().catch(
// catch error and do something
)
Cách khác bạn có thể xử lý lỗi là bằng cách sử dụng khối try/catch. Ví dụ,
// a promise
let promise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('Promise resolved')}, 4000);
});
// async function
async function asyncFunc() {
try {
// wait until the promise resolves
let result = await promise;
console.log(result);
}
catch(error) {
console.log(error);
}
}
// calling the async function
asyncFunc(); // Promise resolved
Trong chương trình trên, chúng tôi đã sử dụng khối try/catch để xử lý lỗi. Nếu chương trình chạy thành công, nó sẽ đi vào khối try. Và nếu chương trình ném ra một lỗi, nó sẽ đi vào khối catch.
Để tìm hiểu thêm về try/catch chi tiết, truy cập JavaScript try/catch.
Lợi ích của Việc Sử dụng Hàm async
- Mã nguồn dễ đọc hơn so với việc sử dụng callback hoặc promise.
- Xử lý lỗi đơn giản hơn.
- Gỡ lỗi dễ dàng hơn.
Chú ý : Hai từ khóa async/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/await.
- Bài viết trên blog này ban đầu đã được xuất bản tại:https://www.programiz.com/
