Bài 8: Bất Đồng Bộ (Asynchronous) trong JavaScript: Học cách làm việc với Promise và async/await

JavaScript là một ngôn ngữ lập trình rất mạnh mẽ, nhưng nó cũng đối mặt với một thách thức quan trọng - làm việc với các hoạt động bất đồng bộ. Điều này bao gồm các tác vụ như gọi API từ máy chủ, tải tài nguyên, và xử lý dữ liệu. Trong bài viết này, chúng ta sẽ tìm hiểu về cách làm việc với các khái niệm quan trọng như Promise và async/await để xử lý các tác vụ bất đồng bộ trong JavaScript.

Bất-Đồng-Bộ-(Asynchronous)-trong-JavaScript

1. Bất Đồng Bộ trong JavaScript

1.1. Khái niệm về Bất Đồng Bộ

Bất đồng bộ là khái niệm trong lập trình cho biết rằng các hoạt động có thể thực hiện đồng thời, không chờ đợi cho đến khi hoàn thành một tác vụ trước khi tiếp tục tác vụ khác. Trong JavaScript, điều này thường xảy ra khi gọi API từ máy chủ hoặc tải dữ liệu từ một nguồn tài nguyên xa.

2. Promise trong JavaScript

2.1. Khái niệm về Promise

Promise là một đối tượng trong JavaScript để xử lý các hoạt động bất đồng bộ. Nó đại diện cho một giá trị có thể hoàn thành ở tương lai hoặc thất bại. Promise có ba trạng thái chính: đang chờ (pending), thực hiện thành công (fulfilled), hoặc thất bại (rejected).

2.2. Sử dụng Promise

Dưới đây là một ví dụ về cách sử dụng Promise để gọi một API từ máy chủ:

const fetchData = () => {

  return new Promise((resolve, reject) => {

    fetch("https://example.com/api/data")

      .then((response) => response.json())

      .then((data) => resolve(data))

      .catch((error) => reject(error));

  });

};

fetchData()

  .then((data) => console.log(data))

  .catch((error) => console.error(error));

3. async/await trong JavaScript

3.1. Khái niệm về async/await

async/await là một tính năng của JavaScript giúp bạn viết mã xử lý bất đồng bộ theo cách dễ đọc và dễ quản lý hơn. Bằng cách sử dụng từ khóa async trước một hàm, bạn có thể biến hàm đó thành một hàm bất đồng bộ. Sử dụng từ khóa await trong hàm bất đồng bộ để đợi một Promise hoàn thành.

3.2. Sử dụng async/await

Dưới đây là một ví dụ về cách sử dụng async/await để gọi cùng API:

const fetchData = async () => {

  try {

    const response = await fetch("https://example.com/api/data");

    const data = await response.json();

    return data;

  } catch (error) {

    throw error;

  }

};

(async () => {

  try {

    const data = await fetchData();

    console.log(data);

  } catch (error) {

    console.error(error);

  }

})();

4. Ưu điểm của Promise và async/await

4.1. Làm cho Mã Dễ Đọc

Promise và async/await giúp mã của bạn trở nên dễ đọc hơn, vì chúng cho phép bạn biểu thị luồng thực thi theo cách tuần tự hơn.

4.2. Quản Lý Lỗi Dễ Dàng

Promise và async/await cho phép bạn dễ dàng xử lý lỗi trong mã của mình, đảm bảo ứng dụng hoạt động một cách ổn định.

4.3. Hiệu Năng Cao

Promise và async/await giúp bạn tận dụng tối đa sức mạnh của JavaScript trong việc xử lý các hoạt động bất đồng bộ mà không gây treo cả trang web.

Bất đồng bộ là một phần quan trọng của lập trình web hiện đại và JavaScript cung cấp một loạt công cụ để xử lý nó. Với Promise và async/await, bạn có khả năng xử lý các hoạt động bất đồng bộ một cách hiệu quả và đảm bảo trải nghiệm người dùng mượt mà. Chúc bạn thành công trong việc học và sử dụng các kỹ thuật này để phát triển ứng dụng web tốt hơn.

Liên hệ để được tư vấn:
Hệ thống đào tạo Lập trình viên Quốc tế Aptech - APTECH SAIGON
  Lầu 5, 172 Nguyễn Trọng Tuyển, Phường 8, Quận Phú Nhuận, TP Hồ Chí Minh
  0987782201 - 02838803888
  tuvan@aptechsaigon.edu.vn

Đăng ký tư vấn miễn phí

Họ tên **

Điện thoại **

Email **


098.778.2201
Chat Zalo