Trong hướng dẫn này, bạn sẽ tìm hiểu về các từ khóa không đồng bộ / chờ đợi trong JavaScript với sự trợ giúp của các ví dụ.
Bạn sử dụng async
từ khóa với một hàm để biểu thị rằng hàm đó là một hàm không đồng bộ. Hàm async trả về một lời hứa.
Cú pháp của async
hàm là:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Đây,
- tên - tên của hàm
- tham số - tham số được truyền cho hàm
Ví dụ: Hàm Async
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Đầu ra
Hàm async.
Trong chương trình trên, async
từ khóa được sử dụng trước hàm để biểu thị rằng hàm là không đồng bộ.
Vì hàm này trả về một lời hứa, 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) ));
Đầu ra
Hàm async 1
Trong chương trình trên, f()
hàm được giải quyết và then()
phương thức được thực thi.
JavaScript đang chờ từ khóa
Các await
từ khóa được sử dụng bên trong async
chức năng để chờ đợi cho các hoạt động không đồng bộ.
Cú pháp để sử dụng await là:
let result = await promise;
Việc sử dụng await
tạm dừng hàm không đồng bộ cho đến khi lời hứa trả về giá trị kết quả (giải quyết hoặc 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();
Đầu ra
Lời hứa đã giải quyết xin chào
Trong chương trình trên, một Promise
đối tượng được tạo và nó sẽ được giải quyết sau 4000 mili giây. Ở đây, asyncFunc()
hàm được viết bằng async
hàm.
Các await
chờ đợi từ khóa cho lời hứa được đầy đủ (quyết hoặc từ chối).
let result = await promise;
Do đó, hello chỉ được hiển thị sau khi giá trị hứa có sẵn cho biến kết quả.
Trong chương trình trên, nếu await
không được sử dụng, hello sẽ hiển thị trước khi Promise được giải quyết.
![](https://cdn.wiki-base.com/5118073/javscript_asyncawait.png.webp)
Lưu ý : Bạn 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 có vẻ đồng bộ. Mặc dù hoạt động không đồng bộ, có vẻ như hoạt động được thực hiện theo cách đồng bộ.
Điều này có thể hữu ích nếu có nhiều lời hứa 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, hãy await
đợi từng lời hứa được hoàn thành.
Xử lý lỗi
Trong khi sử dụng async
hàm, bạn viết mã một cách đồng bộ. Và bạn cũng có thể sử dụng catch()
phương pháp để bắt lỗi. Ví dụ,
asyncFunc().catch( // catch error and do something )
Cách khác mà bạn có thể xử lý lỗi là sử dụng try/catch
khối. 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 try/catch
khối để xử lý các lỗi. Nếu chương trình chạy thành công, nó sẽ chuyển đến try
khối. Và nếu chương trình ném ra một lỗi, nó sẽ chuyển đến catch
khối.
Để tìm hiểu thêm về try/catch
chi tiết, hãy truy cập JavaScript JavaScript try / catch.
Lợi ích của việc sử dụng chức năng không đồng bộ
- Mã dễ đọc hơn so với sử dụng một lệnh gọi lại hoặc một lời hứa.
- Xử lý lỗi đơn giản hơn.
- Gỡ lỗi dễ dàng hơn.
Lưu ý : 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. Để tìm hiểu thêm, hãy truy cập hỗ trợ trình duyệt JavaScript async / await.