Tất cả các yêu cầu mạng, đọc tệp và bộ hẹn giờ đều kết thúc sau, nhưng JavaScript không thể chỉ dừng và chờ, nếu không trang sẽ bị treo. Lời hứa JavaScript cung cấp cho bạn một cách ngắn gọn để nói “khi việc này kết thúc, hãy làm việc đó và nếu thất bại, thay vào đó hãy làm việc này”.

Ngay cả khi bạn chủ yếu viết async và await, bạn vẫn đang sử dụng các lời hứa bên dưới, vì vậy việc hiểu chúng sẽ giúp việc gỡ lỗi trở nên dễ dàng hơn nhiều. Chúng tôi đã chạy các ví dụ này trên Node.js 24 và kết quả hiển thị là từ lần chạy đó. Chúng hoạt động theo cách tương tự trong các trình duyệt hiện đại.

Một lời hứa là gì?

Lời hứa là một phần giữ chỗ cho một giá trị trong tương lai. Hãy nghĩ đến chiếc chuông mà nhà hàng đưa cho bạn khi bạn gọi món. Bạn chưa có thức ăn, nhưng bạn cầm một thứ gì đó sẽ cho bạn biết khi nào nó đã sẵn sàng hoặc có vấn đề gì đó, và trong khi đó bạn có thể tự do làm những việc khác.

Trong mã, hàm không đồng bộ trả về lời hứa ngay lập tức và bạn đính kèm điều gì sẽ xảy ra tiếp theo:

fetch("/api/user")
  .then((response) => response.json())
  .then((user) => console.log(user.name))
  .catch((error) => console.log("Failed:", error.message));

Ba trạng thái hứa hẹn

Một lời hứa được thực hiện hoặc bị từ chối được gọi là đã giải quyết. Một lời hứa chỉ có thể thực hiện được một lần. Sau đó, trạng thái và giá trị của nó được cố định và các lệnh gọi sau tới resolve hoặc reject sẽ bị bỏ qua.

Tạo một lời hứa

Bạn thường sử dụng các lời hứa từ các API như fetch, nhưng việc tạo một API sẽ cho thấy cách chúng hoạt động. Hàm tạo nhận được hai hàm, resolve và reject:

function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: "Asha" });
      } else {
        reject(new Error("Invalid id"));
      }
    }, 100);
  });
}

console.log(fetchUser(1));

// Promise { <pending> }

Ghi lại lời hứa ngay lập tức cho thấy nó vẫn đang chờ xử lý vì bộ hẹn giờ chưa kích hoạt. Giá trị chỉ có thể đạt được thông qua trình xử lý hoặc await. Luôn từ chối bằng đối tượng Error thay vì chuỗi, vì Error mang dấu vết ngăn xếp giúp gỡ lỗi.

sau đó, bắt và cuối cùng

Ba phương thức này gắn các trình xử lý vào một lời hứa:

fetchUser(1).then((user) => console.log(user.name));
// Asha

fetchUser(-1)
  .then((user) => console.log("never runs", user))
  .catch((error) => console.log("caught:", error.message))
  .finally(() => console.log("finally"));

// caught: Invalid id
// finally

then chạy khi thành công, catch chạy khi thất bại và finally chạy theo cách nào đó. Điều đó làm cho finally trở thành nơi thích hợp để dọn dẹp, chẳng hạn như ẩn một vòng quay tải. Nó không nhận được sự tranh luận nào, bởi vì nó không nên quan tâm đến kết quả.

Xâu chuỗi lời hứa

Ý tưởng chính là then luôn trả lại lời hứa mới. Bất cứ điều gì trình xử lý của bạn trả về đều trở thành giá trị của lời hứa mới đó:

Promise.resolve(2)
  .then((n) => n * 10)
  .then((n) => n + 1)
  .then((n) => console.log("chain:", n));

// chain: 21

Nếu một trình xử lý trả lại một lời hứa khác, chuỗi sẽ đợi nó ổn định trước khi tiếp tục. Đây là cách biến các cuộc gọi lại lồng nhau thành một chuỗi các bước phẳng:

getUser(id)
  .then((user) => getOrders(user.id))
  .then((orders) => getInvoice(orders[0].id))
  .then((invoice) => console.log(invoice.total))
  .catch(handleError);

Làm thế nào lỗi di chuyển qua một chuỗi

Một lời hứa bị từ chối sẽ bỏ qua mỗi then cho đến khi đạt đến catch. Ném vào bên trong một trình xử lý cũng được tính là từ chối. Và catch quay trở lại bình thường sẽ đưa chuỗi trở lại đúng hướng:

Promise.resolve("start")
  .then(() => {
    throw new Error("step 2 failed");
  })
  .then(() => console.log("skipped"))
  .catch((error) => {
    console.log("caught:", error.message);
    return "recovered";
  })
  .then((value) => console.log("continues:", value));

// caught: step 2 failed
// continues: recovered

Hãy coi đây là phiên bản không đồng bộ của try và catch. Một catch ở cuối thường bao phủ toàn bộ chuỗi. Nếu bạn chỉ muốn ghi lại một lỗi mà vẫn thất bại, hãy ném lại nó từ bên trong catch.

Promise.all, allSettled, chủng tộc và bất kỳ

Các phương thức tĩnh này phối hợp một số lời hứa cùng một lúc. Tất cả đều lấy một mảng và trả lại một lời hứa.

Để kiểm tra chúng, chúng tôi đã sử dụng hai trợ giúp nhỏ, một trợ giúp thành công sau độ trễ và một trợ giúp thất bại sau độ trễ:

const wait = (ms, value) =>
  new Promise((resolve) => setTimeout(() => resolve(value), ms));
const fail = (ms, message) =>
  new Promise((_, reject) => setTimeout(() => reject(new Error(message)), ms));

Promise.all

await Promise.all([wait(300, "a"), wait(100, "b"), wait(200, "c")]);

// [ 'a', 'b', 'c' ]   took about 300 ms

Hai chi tiết cần chú ý. Kết quả giữ nguyên thứ tự đầu vào, mặc dù b đã hoàn thành trước. Và tổng thời gian là khoảng 300 mili giây, thời gian của tác vụ chậm nhất chứ không phải tổng thời gian là 600 mili giây, vì cả ba đều đã chạy cùng một lúc. Nếu bất kỳ ai trong số họ từ chối, toàn bộ sự việc sẽ từ chối ngay lập tức:

await Promise.all([wait(100, "a"), fail(50, "b failed")]);

// rejected: b failed

Promise.allSettled

Điều này chờ đợi mọi thứ và báo cáo từng kết quả, vì vậy một lỗi không làm mất phần còn lại. Nó phù hợp với một bảng điều khiển trong đó mỗi tiện ích tải độc lập:

const results = await Promise.allSettled([wait(50, "a"), fail(50, "b failed")]);
results.map((r) => r.status);

// [ 'fulfilled', 'rejected' ]

Promise.race và Promise.any

await Promise.race([wait(300, "slow"), wait(100, "fast")]);   // fast
await Promise.any([fail(50, "x"), wait(100, "ok")]);          // ok

Sự khác biệt là race lấy người đầu tiên giải quyết, ngay cả khi nó thất bại, trong khi any bỏ qua những thất bại miễn là có điều gì đó thành công. Cách sử dụng cổ điển của race là thêm thời gian chờ cho một yêu cầu chậm, mặc dù tác vụ chậm hơn vẫn tiếp tục chạy ở chế độ nền trừ khi bạn hủy nó.

Lời hứa và không đồng bộ/chờ đợi

async và await là cách dễ đọc hơn để làm việc với cùng một lời hứa. Hàm async luôn trả về một lời hứa và await tạm dừng hàm đó cho đến khi lời hứa được giải quyết:

async function showInvoice(id) {
  try {
    const user = await getUser(id);
    const orders = await getOrders(user.id);
    console.log(orders.length);
  } catch (error) {
    console.log("Failed:", error.message);
  }
}

Việc từ chối trở thành lỗi ném ra, vì vậy try và catch thông thường sẽ hoạt động. Bạn vẫn cần Promise.all để thực hiện công việc song song, vì việc chờ hết cuộc gọi này đến cuộc gọi khác sẽ chạy chúng theo trình tự. Hướng dẫn chờ đợi/không đồng bộ JavaScript của chúng tôi sẽ đi sâu hơn về vấn đề này.

Lời hứa và vòng lặp sự kiện

Người xử lý lời hứa không bao giờ được gọi ngay lập tức, ngay cả khi lời hứa đã được thực hiện. Chúng chạy sau khi mã hiện tại kết thúc và trước bất kỳ bộ tính giờ nào. Đây là bằng chứng:

setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("microtask"));
console.log("sync");

// sync
// microtask
// timeout

Mã đồng bộ chạy đầu tiên. Tiếp theo là hàng đợi vi nhiệm, chứa các trình xử lý lời hứa. Chỉ khi đó vòng lặp sự kiện mới nhận nhiệm vụ tiếp theo, chẳng hạn như bộ hẹn giờ. Đây là một câu hỏi phỏng vấn phổ biến và nó giải thích tại sao setTimeout bằng 0 không thực sự xuất hiện ngay lập tức.

Lời hứa và cuộc gọi lại

Những lỗi thường gặp

• Quên quay lại bên trong then. Không có return, bước tiếp theo nhận được undefined và không chờ đợi lời hứa bên trong của bạn.
• Không catch gì cả. Điều này gây ra sự từ chối không được xử lý và trong Node.js, quy trình này sẽ dừng quá trình theo mặc định.
• Lồng nhau thay vì xâu chuỗi. Đặt then vào trong then sẽ tạo ra địa ngục gọi lại. Trả lại lời hứa và tiếp tục chuỗi.
• Gói lời hứa trong new Promise. Nếu một hàm đã trả về một lời hứa thì chỉ cần sử dụng nó.
• Sử dụng forEach với lệnh gọi lại không đồng bộ. Nó không chờ. Sử dụng for...of hoặc Promise.all với map, như được hiển thị trong hướng dẫn của chúng tôi về các phương thức mảng JavaScript.
• Suy nghĩ một lời hứa có thể bị hủy bỏ. Tự nó không thể. Đối với các yêu cầu, sử dụng AbortController.

Lời kết

Lời hứa tuân theo một số quy tắc: lời hứa được thực hiện một lần, then trả lại lời hứa mới và lỗi sẽ di chuyển theo chuỗi cho đến khi có thứ gì đó phát hiện được. Một khi những quy tắc đó trở nên tự nhiên, async và await sẽ không còn là phép thuật nữa. Để thực hành, hãy viết lại một hàm dựa trên lệnh gọi lại bằng các lời hứa, sau đó tìm nạp hai điểm cuối bằng Promise.all và xử lý lỗi đúng cách.

Câu hỏi thường gặp

Tiếp tục học hỏi