MN
MN

Giới thiệu tổng quan về Promise trong JavaScript

1. Giới thiệu

Trong JavaScript, Promise là một đối tượng đại diện cho một giá trị hoặc một hành động có thể hoàn thành trong tương lai. Nó được sử dụng để quản lý các tác vụ bất đồng bộ (asynchronous tasks) như gọi API, đọc/ghi file hoặc tương tác với cơ sở dữ liệu. Promise giúp xử lý các tình huống bất đồng bộ theo cách dễ hiểu và quản lý hơn so với việc sử dụng các callback lồng nhau, thường được gọi là “callback hell.”

2. Cấu trúc của Promise

Một Promise có ba trạng thái chính:

  1. Pending (đang chờ xử lý): Đây là trạng thái ban đầu của Promise, nghĩa là hành động bất đồng bộ vẫn chưa hoàn tất hoặc bị từ chối.
  2. Fulfilled (hoàn thành): Promise được hoàn tất thành công và trả về giá trị.
  3. Rejected (bị từ chối): Promise thất bại trong quá trình thực thi và trả về lý do của sự thất bại (thường là một đối tượng lỗi).

3. Cách sử dụng Promise

Một Promise thường được tạo bằng cách khởi tạo một hàm Promise với một hàm callback có hai đối số:

  • resolve: Được gọi khi hành động bất đồng bộ thành công.
  • reject: Được gọi khi hành động bất đồng bộ thất bại.

3.1. Ví dụ tạo Promise:

const myPromise = new Promise((resolve, reject) => {
  let success = true; // Giả lập một điều kiện
  if (success) {
    resolve("Operation completed successfully!"); // Thành công
  } else {
    reject("Operation failed."); // Thất bại
  }
});

3.2. Sử dụng Promise với .then(), .catch() và .finally()

const myPromise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Operation was successful!");
  } else {
    reject("Operation failed!");
  }
});

myPromise
  .then((message) => {
    console.log(message);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("Promise completed. This runs regardless of success or failure.");
  });

Sau khi một Promise được tạo, bạn có thể sử dụng các phương thức .then() và .catch() để xử lý kết quả khi Promise được hoàn tất hoặc bị từ chối. Trong ví dụ này, đoạn mã trong .finally() sẽ luôn được thực hiện, bất kể Promise hoàn tất hay bị từ chối.

3.3. Lưu ý:

  • .finally() không nhận bất kỳ đối số nào và không thể sửa đổi kết quả hoặc lỗi của Promise.
  • Nó hữu ích cho các tác vụ dọn dẹp như tắt spinner tải dữ liệu, đóng file, hoặc giải phóng tài nguyên.

4. Promise chaining (xâu chuỗi Promise)

Các Promise có thể được xâu chuỗi với nhau để thực hiện nhiều tác vụ bất đồng bộ theo thứ tự. Mỗi .then() trả về một Promise mới, cho phép tiếp tục các hành động bất đồng bộ tiếp theo.

myPromise
  .then((message) => {
    console.log(message);
    return new Promise((resolve, reject) => {
      resolve("Next operation completed!");
    });
  })
  .then((nextMessage) => {
    console.log(nextMessage);
  })
  .catch((error) => {
    console.log(error);
  });

5. Promise.all() và Promise.race()

  • Promise.all(): Nhận vào một mảng các Promise và chỉ hoàn thành khi tất cả Promise đều hoàn thành. Nếu bất kỳ Promise nào bị từ chối, Promise.all() sẽ bị từ chối ngay lập tức.
  • Promise.race(): Trả về Promise đầu tiên (dù là hoàn thành hay bị từ chối) trong số các Promise được truyền vào.
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // [3, 42, "foo"]
});

6. Kết luận

Promise trong JavaScript giúp việc quản lý các thao tác bất đồng bộ trở nên dễ dàng hơn, giảm thiểu các vấn đề như callback hell và cung cấp cú pháp rõ ràng hơn cho các thao tác nối tiếp.

Các bài liên quan khác:

  1. Cách biểu diễn các ký tự đặc biệt trong JavaScript
  2. So sánh JavaScript và TypeScript
  3. So sánh JavaScript và VBScript, JScript
  4. Cách khởi tạo Class trong JavaScript
  5. Lịch sử JavaScript
  6. Tổng quan về ECMAScript
  7. Tổng quan JavaScript
  8. Viết một đoạn code JavaScript trong đó dùng Promise để đảm bảo cả 3 tiến trình cùng hoàn thành
  9. JavaScript là ngôn ngữ đồng bộ hay bất đồng bộ?