Javcfscript async / await

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ụ.

Chúng tôi sử dụng asynctừ 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 asynchàm là:

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

Đây,

• name – name of the function
• parameters – parameters that are passed to the function

Ví dụ: Hàm Async

// async function example

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

f(); 

Đầu ra

Async function.

Trong chương trình trên, asynctừ khóa được sử dụng trước hàm để biểu thị rằng hàm 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

Async function
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 awaittừ khóa được sử dụng bên trong asyncchứ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 awaittạ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

Promise resolved
hello

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 asynchàm.

Các awaitchờ đợi từ khóa cho lời hứa được đầy đủ (quyết hoặc từ chối).

let result = await promise;

Kể từ đây, Xin chàochỉ đượ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 awaitkhông được sử dụng,Xin chào được hiển thị trước Lời hứa đã được giải quyết.Hoạt động của chức năng async / await

Lưu ý : Bạn chỉ có thể sử dụng awaitbê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 theo 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 asynchà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 bạn có thể xử lý lỗi là sử dụng try/catchkhố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/catchkhối để xử lý các lỗi. Nếu chương trình chạy thành công, nó sẽ chuyển đến trykhối. Và nếu chương trình ném ra một lỗi, nó sẽ đi đến catchkhối.

Để tìm hiểu thêm về try/catchchi 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ộ

• The code is more readable than using a callback or a promise.
• Error handling is simpler.
• Debugging is easier.

Lưu ý : Hai từ khóa async/awaitnà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 .