Khi nhắc đến xử lý bất đồng bộ trong JavaScript, chắc ai cũng liên tưởng đến một vấn đề của việc sử dụng callback function, đó là **callback hell**, đại khái trông nó sẽ như [thế này](https://images.viblo.asia/2b67c194-4ef8-4879-a44b-410c1b4bddee.png). Qua thời gian, callback bộc lộ nhiều yếu điểm, thời gian hoàn tất tăng lên do các hàm phải "xếp hàng" để chờ nhau thực hiện, cấu trúc code trở nên khá rối và khó bảo trì.

May mắn thay, trong phiên bản ES6, JavaScript mang đến cho người dùng khái niệm **Promise**. Việc viết code bất đồng bộ với cấu trúc Promise và .then() trở nên rất rõ ràng và tường minh, vì vậy cộng đồng nhanh chóng chuyển sang sử dụng Promise thay thế callbacks.

Và ở phiên bản ES7, với sự xuất hiện của **Aync/Await**, viết JavaScript bất đồng bộ còn trở nên dễ dàng và tốt hơn nữa.

## Async/Await là gì?

**Async/Await** là một cách mới để viết code bất đồng bộ, được **Javascript** giới thiệu từ bản cập nhật **ES7**. Nó được xây dựng trên **Promise** và tương thích với tất cả **Promise** dựa trên API. Trong đó được cấu tạo từ 2 thành phần: **async function** và **await**.

### 1. Async functions

Với từ khóa async, chúng ta có thể khai báo hàm bất đồng bộ. Các hàm này có giá trị trả về là một Promise. Mình sẽ minh họa về async với ví dụ sau:

```javascript
async function gdscHust() {
  return "Welcome to GDSC-HUST!"
  //tương đương với return new Promise(resolve => resolve("Welcome to GDSC-HUST!"))
}

gdscHust().then(
    res => console.log(res)
    //in ra Welcome to GDSC-HUST!
)
```

Trong ví dụ trên chúng ta có thể thấy `async` được đặt trước một hàm thông thường để biến thành một hàm bất đồng bộ, giá trị trả về là một Promise nên chúng ta hoàn toàn có thể gọi hàm và xử lý Promise với `.then()` để lấy ra kết quả.

### 2. Await

**Await** sẽ tạm dừng việc thực hiện các hàm async

- Khi đặt trước một Promise, await sẽ khiến các đoạn code còn lại đợi đến khi Promise kết thúc và trả về kết quả.
- Await chỉ làm việc với Promises, nó không hoạt động với callbacks.
- Cho đến phiên bản ES2021, await chỉ được sử dụng bên trong các hàm async. Ở phiên bản ES2022, JavaScript đã mang đến người dùng khái niệm ***top-level async/await*** giúp sử dụng await một cách linh hoạt hơn.

Đễ dễ hình dung, trước khi có async/await chúng ta sẽ xử lý các đoạn code bất đồng bộ với Promises, bây giờ chúng ta sẽ xử lý các đoạn code đó trong hàm async. Sau đây, mình sẽ ví dụ về việc lấy dữ liệu với 2 cách khác nhau: cách thứ 1 với Promises, và cách thứ 2 với Async / Await.

```javascript
// cách 1:
function getJSON() {
  // To make the function blocking we manually create a Promise.
  return new Promise(function (resolve) {
    fetch("https://dummyjson.com/products").then(function (res) {
      // The data from the request is available in a .then block
      // We return the result using resolve.
      resolve(res.json());
    });
  });
}
// cách 2:
// Async/Await approach

// The async keyword will automatically create a new Promise and return it.
async function getJSONAsync() {
  // The await keyword saves us from having to write a .then() block.
  let res = await fetch("https://dummyjson.com/products");

  // The result of fetch request is available in the res variable.
  // We return it just like in a regular synchronous function.
  return res.json();
}
```

Hai hàm trên đều thực hiện fetch dữ liệu với api https://dummyjson.com/products, sau đó trả về một Promise với dữ liệu đã được xử lý. Tuy nhiên, chúng ta có thể thấy cách tiếp cận với Async/Await ngắn hơn và dễ đọc hơn.

Vì giá trị trả về là một Promise nên chúng ta có thể xử lý tiếp như sau:

```javascript
getJSONAsync().then( function(result) {
	// Do something with result.
});
```

## Xử lý lỗi trong Async/Await

Khi xử lý bất đồng bộ, đôi lúc chúng ta sẽ gặp các lỗi không mong muốn, Async/Await cho phép chúng ta sử dụng câu lệnh try/catch để bắt các lỗi. Chúng ta chỉ cần để các await call của chúng ta vào trong khối try/catch, mệnh đề catch sẽ xử lý các lỗi có thể xảy ra bên trong mệnh đề try:

```javascript
async function doSomethingAsync(){
	try {
		// This async call may fail.
		let result = await someAsyncCall();
	}
	catch(error) {
		// If it does we will catch the error here.
	}  
}
```

Trong một vài trường hơp, chúng ta có thể bắt các lỗi khi đang chạy async function. Bởi vì hàm async trả về một Promise, chúng ta chỉ cần thêm `.catch()` để xử lý sau khi gọi hàm.

```javascript
// Async function without a try/catch block.
async function doSomethingAsync(){
    // This async call may fail.
    let result = await someAsyncCall();
    return result;  
}

// We catch the error upon calling the function.
doSomethingAsync().
    .then(successHandler)
    .catch(errorHandler);
```

Bạn nên quen thuộc với một trong hai cách xử lý lỗi và tuân theo nó. Đôi khi sử dụng cả `try/catch` và `.catch()` sẽ dẫn đến những lỗi không mong muốn.

## Tạm kết

Chúng ta vừa đi qua một số khái niệm cơ bản về Async/Await trong JavaScript. Async/Await giúp cho việc xử lý bất đồng bộ trong Js trở nên dễ dàng và ít gặp lỗi hơn. Cảm ơn các bạn đã đọc bài viết, hẹn gặp các bạn ở những bài viết tiếp theo.

Khi nhắc đến xử lý bất đồng bộ trong JavaScript, chắc ai cũng liên tưởng đến một vấn đề của việc sử dụng callback function, đó là **callback hell**, đại khái trông nó sẽ như [thế này](https://images.viblo.asia/2b67c194-4ef8-4879-a44b-410c1b4bddee.png). Qua thời gian, callback bộc lộ nhiều yếu điểm, thời gian hoàn tất tăng lên do các hàm phải "xếp hàng" để chờ nhau thực hiện, cấu trúc code trở nên khá rối và khó bảo trì.

Giới thiệu về Async/Await trong JavaScript

Khi sử dụng JavaScript lập trình web, chúng ta nhiều khi gặp một số trường hợp cần lưu trữ thông tin phía client như thông tin người dùng, theme của trang web, hay một số thông tin hữu dụng khác trong quá trình người dùng thao tác với website. JavaScript cung cấp cho chúng ta ba cơ chế để lưu trữ các thông tin này: **Local Storage, Session Storage và Cookies.** Ở bài viết này, mình sẽ giới thiệu cho các bạn về ba cơ chế này cũng như sự khác biệt giữa chúng nhé.

## Local Storage

Local Storage có thể lưu trữ thông tin giữa các session khác nhau, session ở đây có nghĩa là phiên làm việc của website, dữ liệu đã lưu vào local storage sẽ không bị xóa đi sau khi session kết thúc (có thể hiểu là khi bạn đóng website). Với tính chất này, local storage thường được sử dụng để lưu các settings, user preferences của một website.

Phương thức lưu trữ này có thể lưu đến 10MB dữ liệu, lớn nhất trong 3 loại nhưng có một nhược điểm đó là local storage chỉ có thể lưu được kiểu dữ liệu chuỗi (String).

**Cách lưu và đọc của Local Storage:**

```js
// Lưu dữ liệu vào Local Storage
localStorage.setItem('name', 'koalalikecode');

// Đọc dữ liệu từ Local Storage
const name = localStorage.getItem('name');
console.log(name); // In ra: koalalikecode
```

**Xóa Local Storage:**

```js
// Xóa một biến
localStorage.removeItem(key);

// Xóa toàn bộ trong Local Storage
localStorage.clear();
```

## Session Storage

Session Storage gần như giống hệt Local Storage trừ một điểm là dữ liệu lưu trữ bởi Session Storage sẽ bị xóa sau khi phiên làm dịch của website kết thúc, tức là khi người dùng đóng tab trên trình duyệt.

Cũng từ lý do như trên, mỗi lần chúng ta bật một tab mới là sẽ xuất hiện một session mới ứng với tab đó, vì vậy có thể cùng một trang web nhưng 2 tab khác nhau thì dữ liệu trong session storage cũng sẽ khác nhau.

Session Storage thường ứng dụng để lưu các dữ liệu chỉ tồn tại ở phiên làm việc đó, chẳng hạn như thông tin phiên làm việc của người dùng, hay một số web cần check vị trí của người dùng.

**Cách lưu và đọc của Session Storage**

```js
// Lưu dữ liệu vào Session Storage
sessionStorage.setItem('name', 'koalalikecode');

// Đọc dữ liệu từ Session
const name = sessionStorage.getItem('name');
console.log(name); // Output: koalalikecode
```

**Xóa Session Storage:**

```js
// Xóa một biến
sessionStorage.removeItem(key);

// Xóa toàn bộ trong Session Storage
sessionStorage.clear();
```

## Cookies 🍪🍪🍪

Cookies là các dữ liệu do người dùng tạo ra trong quá trình sử dụng trang web và được lưu ở local machine. Cơ chế này giúp nâng cao trải nghiệm sử dụng web thông qua việc lưu một số thông tin hữu ích như thông tin đăng nhập của người dùng, ngôn ngữ duyệt web,…

Khác với Local Storage và Session Storage chỉ access được dữ liệu ở phía client, cookies cho phép chúng ta access được cả ở client và server (khi tạo một http request thì cookies của browser sẽ được attach vào header Cookie, từ đó phía server có thể parse header này và get được data cookie).

Cookies cho phép lưu trữ tối đa khoảng 4KB và khác với local storage, nó cho phép lưu trữ cả các kiểu dữ liệu khác ngoài chuỗi (có thể là array, object,…). Ngoài ra, cookies có thời gian expire cụ thể, có thể là do lập trình viên cung cấp.

**Cách tạo cookies và đọc cookies**

```js
// Tạo cookies 
document.cookie = 'username=koalalikecode; expires=Fri, 21 Apr 2023 8:00:00 UTC';

// Đọc cookies
let x = document.cookie;
```

Ở ví dụ trên, ta có thể thấy, ngoài giá trị key-value `username`, ta còn có thể cung cấp thời hạn cookies kết thúc bằng `expires` key và value là một thời gian cụ thể. Khi đọc cookies, `document.cookie` sẽ trả lại tất cả cookie trong một chuỗi tring kiểu như: `cookie1 = giá trị; cookie2 = giá trị; cookie3 = giá trị;`

## Bảng so sánh
|Local Storage|Session Storage|Cookies|
|---|---|---|
|Dung lượng lưu trữ 5MB/10MB|Dung lượng lưu trữ 5MB|Dung lượng lưu trữ 4KB|
|Vô thời hạn, chỉ có thể xóa bằng javascript hoặc thủ công|Chỉ tồn tại trong phạm vị session, tab trình duyệt|Cookies hết hạn dựa trên thiết lập ban đầu|
|Chỉ có thể đọc được ở phía client|Chỉ có thể đọc được ở phía client|Có thể đọc được ở cả client và server|
|Không có dữ liệu truyền về server|Không có dữ liệu truyền về server|Có tồn tại dữ liệu truyền về server|


JavaScript cung cấp cho chúng ta ba cơ chế để lưu trữ các thông tin này: Local Storage, Session Storage và Cookies. Ở bài viết này, mình sẽ giới thiệu cho các bạn về ba cơ chế này cũng như sự khác biệt giữa chúng nhé.

🏷️Posts tagged #javaScript

Tags