Async/await

Tóm Tắt

Từ phiên bản ES2017, Javascript đã thêm hai từ khóa async và await. Đây là các cú pháp thay thế cho cú pháp cũ là constructor Promise(), hàm then(), catch(), còn bản chất Promise vẫn giữ nguyên.

Hàm async

Từ khóa async đặt trước hàm để chuyển hàm đó từ hàm đồng bộ sang thành hàm bất đồng bộ (async function). Hàm bất đồng bộ khi thực thi sẽ trả về một Promise.

Ví dụ về hàm async:


async
 function
 hello
()
 {
 return
 "Hello asyc"
 }
 // hàm thông thường
let
 hello1
 =
 async
 function
()
 {
 return
 "Hello express"
 };
 // biểu thức hàm
let
 hello2
 =
 async
 ()
 =>
 "Hello arrow"
;
 // hàm mũi tên
class
 Person
 {
  
async
 greeting
()
 {
 // phương thức async
    return
 "Hello method"
;
  
};
}
// sử dụng hàm bất đồng bộ
hello
().
then
((
message
)
 =>
 console
.
log
(
message
));
 // Hello asyc
hello1
().
then
((
message
)
 =>
 console
.
log
(
message
));
 // Hello express
hello2
().
then
((
message
)
 =>
 console
.
log
(
message
));
 // Hello arrow

// Hello method
new
 Person
().
greeting
().
then
(
message
 =>
 console
.
log
(
message
));

Trong ví dụ trên hàm hello() ở trên tương đương với:

1
2
3


function
 hello
()
 {
  
return
 Promise
.
resolve
(
"Hello asyc"
);
}

Từ khóa await

Từ khóa await đặt trước biểu thức Promise để lấy giá trị trả về. Từ khóa await phải đặt trong hàm async. Khi gặp câu lệnh với từ khóa await, Promise phải thực thi xong mới chạy câu lệnh tiếp theo. Tức là các câu lênh await sẽ chuyển thực thi Promise bất đồng bộ thành chạy tuần tự.

Ví dụ đơn giản sử dụng await:


async
 function
 hello
()
 {
  
// đặt trước string sẽ chuyển string thành Promise
  let
 message
 =
 await
 "Hello asyc"
; 
  
return
 message
;
};

hello
().
then
((
message
)
 =>
 console
.
log
(
message
));
 // Hello asyc

Ví dụ khác sử dụng await:


// promise1 và promise2 là hàm trả về Promise
const
 promise1
 =
 ()
 =>
 new
 Promise
((
resolve
,
 reject
)
 =>
 {
  
setTimeout
(
resolve
,
 500
,
 123
);
});

const
 promise2
 =
 ()
 =>
 new
 Promise
((
resolve
,
 reject
)
 =>
 {
  
setTimeout
(
resolve
,
 100
,
 456
);
});

async
 function
 getNumber
()
 {
  
// promise1 chạy xong đến promise2 sẽ chạy
  // mất thời gian tổng cộng 600ms
  let
 firstNumber
 =
 await
 promise1
();
  
let
 secondNumber
 =
 await
 promise2
();
  
return
 firstNumber
 +
 secondNumber
;
};
getNumber
().
then
((
number
)
 =>
 console
.
log
(
number
));
 // 579

Hàm setNumber() ở ví dụ trên có thể viết lại như sau:


function
 getNumber
()
 {
  
let
 firstNumber
,
 secondNumber
;
  
return
 Promise
.
resolve
()
    
.
then
(()
 =>
 promise1
().
then
(
number
 =>
 firstNumber
 =
 number
))
    
.
then
(()
 =>
 promise2
().
then
(
number
 =>
 secondNumber
 =
 number
))
    
.
then
(()
 =>
 firstNumber
 +
 secondNumber
);
};

Chúng ta thấy rằng viết Promise theo kiểu async/await như ví dụ trước là dễ đọc và dễ hiểu tương tự cú pháp thông thường.

Quản lý lỗi với try-catch

Chúng ta sử dụng try-catch thay cho hàm catch() để quản lý lỗi với Promise sử dụng async/await.


const
 promise1
 =
 ()
 =>
 new
 Promise
((
resolve
,
 reject
)
 =>
 {
  
setTimeout
(
reject
,
 500
,
 123
);
});

const
 promise2
 =
 ()
 =>
 new
 Promise
((
resolve
,
 reject
)
 =>
 {
  
setTimeout
(
resolve
,
 100
,
 456
);
});

async
 function
 getNumber
()
 {
  
try
 {
    
let
 firstNumber
 =
 await
 promise1
();
    
let
 secondNumber
 =
 await
 promise2
();
    
return
 firstNumber
 +
 secondNumber
;
  
}
 catch
 (
error
)
 {
    
console
.
error
(
'Lỗi trong promise '
 +
 error
.
toString
());
 // 123
  }
};
getNumber
();

Chạy promise đồng thời với Promise.all()

Toán tử await sẽ chạy các promise tuần tự, để chạy đồng thời hãy sử dụng hàm Promise.all

Ví dụ sau chạy đồng thời hai promise nên thời gian sẽ chạy ít hơn ví dụ trước 100ms.


const
 promise1
 =
 ()
 =>
 new
 Promise
((
resolve
,
 reject
)
 =>
 {
  
setTimeout
(
resolve
,
 500
,
 123
);
});

const
 promise2
 =
 ()
 =>
 new
 Promise
((
resolve
,
 reject
)
 =>
 {
  
setTimeout
(
resolve
,
 100
,
 456
);
});

async
 function
 getNumber
()
 {
  
// chạy song song nên thời gian chạy là khoảng 500ms
  return
 Promise
.
all
([
promise1
(),
 promise2
()])
    
.
then
(([
firstNumber
,
 secondNumber
])
 =>
 firstNumber
 +
 secondNumber
)
};
getNumber
().
then
((
number
)
 =>
 console
.
log
(
number
));
 // 579

Async/await

Hàm async

Từ khóa await

Quản lý lỗi với try-catch

Chạy promise đồng thời với Promise.all()

mtoplist