[Javascript] – Phần 68: JavaScript Promise

Giới thiệu

Promise là một đối tượng mạnh mẽ trong JavaScript giúp đơn giản hóa lập trình bất đồng bộ bằng cách xử lý các phức tạp của việc chờ kết quả từ các hoạt động có thể mất thời gian để hoàn thành. Bài viết này cung cấp một tổng quan toàn diện về Promise trong JavaScript, giải thích khái niệm, cách sử dụng và lợi ích của chúng.

Promise là gì?

Promise là một đối tượng đại diện cho kết quả cuối cùng (hoặc thất bại) của một hoạt động bất đồng bộ. Nó đóng vai trò là liên kết giữa “code tạo” (code thực hiện hoạt động) và “code tiêu thụ” (code chờ kết quả). Sự tách biệt các mối quan tâm này giúp viết code sạch và có tổ chức, đặc biệt khi xử lý nhiều hoạt động bất đồng bộ.

Trạng thái của đối tượng Promise

Một đối tượng Promise có thể tồn tại ở ba trạng thái:

• Pending: Đây là trạng thái ban đầu khi hoạt động chưa bắt đầu hoặc vẫn đang trong quá trình thực hiện.
• Fulfilled: Trạng thái này cho biết hoạt động đã hoàn thành thành công và kết quả đã có sẵn.
• Rejected: Trạng thái này cho biết hoạt động đã thất bại và có lỗi xảy ra.

Phương thức Promise

Promise cung cấp một số phương thức để xử lý các trạng thái và truy cập kết quả của chúng:

• then(onFulfilled, onRejected): Phương thức này cho phép bạn chỉ định hai hàm gọi lại: một cho xử lý hoàn thành thành công (onFulfilled) và một cho xử lý lỗi (onRejected).
• catch(onRejected): Phương thức này tương đương với việc gọi then(null, onRejected). Nó cho phép bạn chỉ định một hàm gọi lại chỉ để xử lý lỗi.
• finally(onFinally): Phương thức này cho phép bạn chỉ định một hàm gọi lại sẽ được gọi bất kể Promise được hoàn thành hay bị từ chối.

Lợi ích của việc sử dụng Promise

Promises mang lại một số lợi thế so với lập trình bất đồng bộ dựa trên callback truyền thống:

• Đọc và bảo trì dễ dàng hơn: Promises làm cho code dễ đọc và dễ bảo trì hơn bằng cách tách biệt code tạo và code tiêu thụ.
• Kết nối Promise: Bạn có thể dễ dàng kết nối nhiều hoạt động bất đồng bộ bằng cách sử dụng phương thức then, tạo ra một luồng code trôi chảy và biểu cảm hơn.
• Xử lý lỗi: Promises cung cấp một cách rõ ràng và có cấu trúc để xử lý lỗi thông qua sự từ chối và phương thức catch.
• Tổ chức code tốt hơn: Promises giúp tổ chức code của bạn xung quanh các hoạt động bất đồng bộ, làm cho mã ít bị spaghetti code và callback hell hơn.

Ví dụ

Dưới đây là một số ví dụ về cách sử dụng Promises trong các tình huống khác nhau:

1. Chờ hết thời gian chờ

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Timeout hoàn thành!");
  }, 3000);
});

promise.then(
  result => console.log(result),
  error => console.error(error)
);

2. Lấy dữ liệu từ API

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Dưới đây là một số mẹo khác để sử dụng Promises hiệu quả:

• Sử dụng Promise.resolve() để tạo một Promise được hoàn thành thành công ngay lập tức.
• Sử dụng Promise.reject() để tạo một Promise bị từ chối ngay lập tức.
• Sử dụng Promise.race() để kết nối hai Promise và trả về Promise nào được hoàn thành trước.
• Sử dụng Promise.allSettled() để kết nối nhiều Promise và trả về một mảng chứa các đối tượng chứa trạng thái và kết quả của từng Promise.

Các ví dụ nâng cao

Dưới đây là một số ví dụ nâng cao về cách sử dụng Promises:

1. Sử dụng Promise để thực hiện các tác vụ song song

const promises = [
  fetch("https://api.example.com/data1"),
  fetch("https://api.example.com/data2"),
];

Promise.all(promises)
  .then(responses => {
    // Xử lý kết quả của cả hai Promise
  })
  .catch(error => {
    // Xử lý lỗi
  });

2. Sử dụng Promise để xử lý các lỗi theo cách có cấu trúc

const promise = new Promise((resolve, reject) => {
  // Lấy dữ liệu từ API
  fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => resolve(data))
    .catch(error => reject(error));
});

promise.then(
  data => console.log(data),
  error => console.error(error)
);

3. Sử dụng Promise để thực hiện các tác vụ sau khi Promise được hoàn thành

const promise = new Promise((resolve, reject) => {
  // Thực hiện một tác vụ tốn thời gian
  setTimeout(() => {
    resolve("Timeout hoàn thành!");
  }, 3000);
});

promise.then(() => {
  // Thực hiện một tác vụ sau khi Promise được hoàn thành
});

Kết luận

Promises trong JavaScript là một công cụ cơ bản để viết mã bất đồng bộ theo cách có cấu trúc và hiệu quả. Khả năng xử lý nhiều hoạt động bất đồng bộ, kết nối chúng với nhau và xử lý lỗi hiệu quả khiến chúng trở thành tài sản quý giá cho bất kỳ nhà phát triển JavaScript nào.