Trong bài viết trước ta đã biết được Promise hoạt động ra sao, còn trong bài này chúng ta sẽ tìm hiểu async/await liên quan như thế nào đến promise. Vậy async/await là gì ?

1.Async/await là gì ?

Async/await là cú pháp trong ES6 dùng để xử lý các tác vụ bất đồng bộ trở nên đồng bộ hơn, nghĩa là làm cho code bất đồng bộ sẽ được thực thi tuần tự, dễ đọc hơn.

1.1 Async

Async được đặt trước 1 function tạo thành function async , function async thì luôn trả về 1 promise.

Cú pháp:

async function demo() {

}

1.2 Await

Await chỉ được sử dụng trong function async, nó làm cho đoạn code bất đồng bộ dừng lại để thực hiện xong và trả về kết quả rồi mới chạy tiếp. Await chỉ có hiệu lực khi đứng trước 1 promise.

Cú pháp:

async function demo() {
 const result1 = await callApi1();
 const result2 = await callApi2();

 console.log(result1, result2);
}

Trong đoạn code trên ta muốn function callApi1 chạy xong có data trả về rồi mới chạy tiếp function callApi2. Để làm được điều đó ta sử dụng function async và đặt await trước lệnh gọi hàm. Khi đặt await trước function callApi1 thì nó sẽ đợi cho function callApi1 chạy xong trả về kết quả, sau đó nó mới chạy function callApi2 và cũng đợi cho có kết quả rồi mới log ra ở dòng cuối cùng. Như vậy 2 function callApi1 và callApi2 là 2 promise nhưng bây giờ đã được chạy tuần tự giúp chúng ta có được data trước khi xử lý những bước tiếp theo.

2.Ví dụ thực tế về async/await

function fetchData() {
 return new Promise((resolve, reject) => {
 // Thực hiện yêu cầu API
 fetch('https://65bde306dcfcce42a6f18b72.mockapi.io/api/user')
 .then(response => {
 // Kiểm tra trạng thái HTTP
 if (!response.ok) {
 reject("Lỗi")
 }
 // Chuyển đổi dữ liệu JSON và trả về
 return response.json();
 })
 .then(data => {
 // Dữ liệu thành công
 resolve(data);
 })
 .catch(error => {
 // Xử lý lỗi
 reject(error);
 });
 });
}


async function handleData() {
 try {
 const response = await fetchData(); 
 localStorage.setItem('users', JSON.stringify(data))
 } catch (error) {
 console.log(error) 
 }
}

handleData()

Trong ví dụ trên ta muốn lấy danh sách user và lưu vào localStorage. Trong function fetchData, sử dụng method fetch gọi 1 api từ Mockapi được tạo sẵn, sau khi lấy được dữ liệu ta tiến hành xử lý và trả về 1 promise trong function này.

Trong function handleData ta sử dụng async/await để gọi function fetchData lấy dữ liệu trước khi lưu dữ liệu vào localStorage.

Lưu ý: Trong promise thì có method .catch để bắt lỗi, còn với xử lý async/await thì sử dụng cú pháp try/catch như trên, lỗi sẽ vào catch.

Nếu không dùng async/await chỗ này thì code sẽ thành:

async function handleData() {
 fetchData()
 .then(res => {
 localStorage.setItem('users', JSON.stringify(res))
 })
 .catch(err => {
 console.log(err)
 })
}

Lúc này sẽ xử lý lưu data trong method .then của promise, như vậy sẽ dài dòng hơn nhiều.

Như vậy async/await sinh ra không phải để thay thế promise mà giúp cho việc xử lý promise trở nên dễ dàng và đồng bộ hơn.

Tham gia các khoá học lập trình nâng cao tại đây:

• Khoá học Frontend: tại đậy
• Khoá học Backend: tại đây
• Khoá học Fullstack: tại đây
• Khoá học React-native: tại đây