Trang chủ » Kiến thức Website » Kiến thức Kỹ thuật Website » Kiến thức Frontend » Kiến thức JavaScript » Promise trong JavaScript: Hướng Dẫn Toàn Diện (Kèm Ví Dụ)

Promise trong JavaScript: Hướng Dẫn Toàn Diện (Kèm Ví Dụ)

ĐĂNG VÀO 17/01/2026 BỞI Lý Văn Hiếu

Lập trình bất đồng bộ là một phần không thể thiếu của JavaScript hiện đại. Tuy nhiên, nó cũng đi kèm với những thách thức, đặc biệt là “Callback Hell”. Bài viết này sẽ là kim chỉ nam giúp bạn tìm hiểu toàn diện về promise javascript, một giải pháp mạnh mẽ giúp bạn viết code bất đồng bộ sạch sẽ, dễ đọc và dễ quản lý hơn rất nhiều. Hãy cùng WiWeb bắt đầu hành trình này nhé!

Tại sao chúng ta cần Promise trong JavaScript?

Trước khi đi sâu vào kỹ thuật, chúng ta cần hiểu rõ vấn đề mà Promise được sinh ra để giải quyết. Trong JavaScript, nhiều tác vụ mất thời gian để hoàn thành, ví dụ như gọi API, đọc file, hay tương tác với cơ sở dữ liệu. Đây chính là lúc lập trình bất đồng bộ (asynchronous javascript) phát huy tác dụng.

Vấn đề của lập trình bất đồng bộ: Callback Hell là gì?

Ban đầu, JavaScript sử dụng các hàm gọi lại (callback function) để xử lý các tác vụ bất đồng bộ. Ý tưởng rất đơn giản: khi một tác vụ hoàn thành, nó sẽ gọi một hàm khác để xử lý kết quả. Tuy nhiên, khi bạn có nhiều tác vụ phụ thuộc lẫn nhau, mọi thứ trở nên phức tạp.

Bạn sẽ phải lồng các callback vào nhau, tạo ra một cấu trúc thường được gọi là Callback Hell hay Pyramid of Doom (Kim tự tháp địa ngục). Mã nguồn lúc này rất khó đọc, khó bảo trì và cực kỳ khó để xử lý lỗi một cách nhất quán.

// Ví dụ về Callback Hell
getData(function(a) {
    getMoreData(a, function(b) {
        getEvenMoreData(b, function(c) {
            // Và cứ thế lồng vào nhau...
        });
    });
});

Bạn có thấy cấu trúc thụt vào liên tục kia không? Đó chính là vấn đề.

Promise vs Callback: Sự khác biệt và cải tiến

Promise ra đời như một sự cải tiến vượt bậc so với callback. Thay vì truyền một hàm gọi lại, một hàm bất đồng bộ giờ đây sẽ trả về một đối tượng Promise. Đối tượng này đại diện cho một “lời hứa” rằng tác vụ sẽ hoàn thành trong tương lai. Nó có thể thành công hoặc thất bại.

Sự khác biệt chính là:

Callback: Bạn đưa cho hàm bất đồng bộ một công việc phải làm sau khi xong. Mã nguồn bị lồng vào nhau.
Promise: Hàm bất đồng bộ đưa lại cho bạn một lời hứa. Bạn có thể quyết định sẽ làm gì với lời hứa đó (.then(), .catch()) một cách riêng biệt. Mã nguồn trở nên phẳng và dễ theo dõi hơn.

Promise: Lời hứa về một giải pháp lập trình sạch hơn

Promise không chỉ giúp thoát khỏi Callback Hell. Nó còn cung cấp một cơ chế xử lý lỗi tập trung và mạnh mẽ hơn thông qua phương thức .catch(). Thay vì phải kiểm tra lỗi ở mỗi cấp callback, bạn có thể bắt tất cả lỗi trong một chuỗi các hành động chỉ bằng một khối .catch() duy nhất. Đây chính là lời hứa về một mã nguồn sạch hơn, dễ quản lý hơn.

*Tại sao chúng ta cần Promise trong JavaScript?*

Promise là gì? Khám phá các khái niệm cốt lõi

Bây giờ, hãy cùng mổ xẻ khái niệm cốt lõi của promise javascript. Hiểu rõ bản chất của nó sẽ giúp bạn sử dụng một cách hiệu quả và tự tin hơn.

Định nghĩa Promise: Một đối tượng đại diện cho tác vụ chưa hoàn thành

Nói một cách đơn giản, Promise là một đối tượng đặc biệt trong JavaScript. Nó đại diện cho kết quả cuối cùng của một hoạt động bất đồng bộ. Bạn có thể hình dung Promise như một giấy hẹn. Khi bạn đặt hàng online, bạn nhận được một mã đơn hàng. Mã đơn hàng này chưa phải là món hàng, nhưng nó là lời hứa rằng bạn sẽ nhận được hàng (thành công) hoặc một thông báo hết hàng (thất bại) trong tương lai. Promise cũng hoạt động tương tự.

Giải mã 3 trạng thái của một Promise: Pending, Fulfilled, và Rejected

Một Promise luôn ở một trong ba trạng thái sau:

Pending (Đang chờ): Đây là trạng thái ban đầu của Promise, khi tác vụ bất đồng bộ chưa hoàn thành. Giống như khi bạn vừa đặt hàng xong và đang chờ shop xử lý.
Fulfilled (Đã hoàn thành): Tác vụ đã hoàn thành thành công. Promise lúc này giữ một giá trị kết quả. Giống như bạn đã nhận được món hàng của mình.
Rejected (Đã bị từ chối): Tác vụ đã thất bại. Promise lúc này giữ một lý do (thường là một đối tượng Error) cho sự thất bại đó. Giống như bạn nhận được thông báo đơn hàng bị hủy.

Một khi Promise đã chuyển từ pending sang fulfilled hoặc rejected, trạng thái của nó sẽ không bao giờ thay đổi nữa. Nó được gọi là đã settled (đã được giải quyết).

Ví dụ về Promise trong JavaScript: Từ lý thuyết đến thực tế

Hãy xem một javascript promise example đơn giản. Chúng ta sẽ tạo một Promise mô phỏng việc kiểm tra xem một số có phải là số chẵn hay không sau 2 giây.

// Tạo một Promise
const isEvenNumber = new Promise((resolve, reject) => {
  setTimeout(() => {
    const number = 4;
    if (number % 2 === 0) {
      resolve("Thành công! Đây là số chẵn."); // Promise được fulfilled
    } else {
      reject(new Error("Thất bại! Đây không phải số chẵn.")); // Promise bị rejected
    }
  }, 2000); // Giả lập độ trễ 2 giây
});

console.log(isEvenNumber); // In ra: Promise { <pending> }

// Sau 2 giây, Promise sẽ chuyển trạng thái

Ở ví dụ trên, Promise được khởi tạo với trạng thái pending. Sau 2 giây, tùy vào giá trị của number, nó sẽ gọi resolve (chuyển sang fulfilled) hoặc reject (chuyển sang rejected).

*Promise là gì? Khám phá các khái niệm cốt lõi*

Cú pháp và cách sử dụng Promise cơ bản

Nắm vững lý thuyết rồi, giờ là lúc thực hành. WiWeb sẽ hướng dẫn bạn cách tạo và sử dụng Promise với các phương thức cơ bản nhất: .then(), .catch(), và .finally().

Cách tạo một Promise mới với `new Promise(executor)`

Bạn tạo một Promise bằng cách sử dụng constructor new Promise(). Nó nhận vào một hàm duy nhất gọi là executor. Hàm executor này lại nhận vào hai tham số là hai hàm khác: resolve và reject.

resolve(value): Khi tác vụ bất đồng bộ thành công, bạn gọi hàm này và truyền vào kết quả. Thao tác này sẽ chuyển trạng thái Promise thành fulfilled.
reject(error): Khi có lỗi xảy ra, bạn gọi hàm này và truyền vào lý do thất bại. Thao tác này sẽ chuyển trạng thái Promise thành rejected.

Xử lý kết quả thành công với phương thức `.then()`

Phương thức .then() được dùng để “đăng ký” một hành động sẽ được thực thi khi Promise chuyển sang trạng thái fulfilled. Nó nhận vào một hàm, và tham số của hàm này chính là giá trị mà bạn đã truyền vào resolve().

const myPromise = new Promise((resolve, reject) => {
  // Giả lập thành công sau 1 giây
  setTimeout(() => resolve("Dữ liệu đã sẵn sàng!"), 1000);
});

myPromise.then(result => {
  console.log(result); // In ra: "Dữ liệu đã sẵn sàng!"
});

Bắt và xử lý lỗi thất bại với phương thức `.catch()`

Ngược lại với .then(), phương thức .catch() được dùng để xử lý trường hợp Promise bị rejected. Nó cũng nhận vào một hàm, và tham số của hàm này là lỗi mà bạn đã truyền vào reject().

const errorPromise = new Promise((resolve, reject) => {
  // Giả lập thất bại sau 1 giây
  setTimeout(() => reject(new Error("Không thể lấy dữ liệu")), 1000);
});

errorPromise.catch(error => {
  console.error(error.message); // In ra: "Không thể lấy dữ liệu"
});

Thực thi tác vụ dọn dẹp với phương thức `.finally()`

Đôi khi bạn muốn một đoạn mã luôn được thực thi, dù Promise thành công hay thất bại. Ví dụ như tắt một biểu tượng loading, đóng một kết nối cơ sở dữ liệu. Đó là lúc .finally() tỏa sáng. Hàm bên trong .finally() sẽ được gọi sau khi Promise đã settled (hoặc fulfilled, hoặc rejected) và không nhận bất kỳ tham số nào.

const promise = new Promise(/*...*/);

promise
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => {
    console.log("Tác vụ đã hoàn tất, dù thành công hay thất bại.");
  });

*Cú pháp và cách sử dụng Promise cơ bản*

Promise Chaining: Nối chuỗi các tác vụ bất đồng bộ một cách logic

Một trong những sức mạnh lớn nhất của Promise là khả năng nối chuỗi, hay promise chaining. Kỹ thuật này cho phép bạn thực thi một loạt các tác vụ bất đồng bộ một cách tuần tự, làm cho mã nguồn cực kỳ dễ đọc và logic.

Tại sao Promise Chaining lại quan trọng?

Promise Chaining giúp bạn giải quyết triệt để vấn đề Callback Hell. Thay vì lồng các hàm vào nhau theo chiều sâu, bạn có thể sắp xếp chúng theo một chuỗi phẳng, tuần tự. Mỗi bước trong chuỗi chỉ bắt đầu khi bước trước đó đã hoàn thành thành công. Điều này giúp cấu trúc mã của bạn giống với cách bạn suy nghĩ một cách tự nhiên: làm việc A, sau đó làm việc B, sau đó làm việc C.

Hướng dẫn kỹ thuật chuỗi Promise với ví dụ cụ thể

Chìa khóa của promise chaining là phương thức .then() có thể trả về một giá trị hoặc một Promise khác. Nếu nó trả về một Promise, .then() tiếp theo trong chuỗi sẽ đợi Promise đó hoàn thành trước khi thực thi.

Hãy xem ví dụ:

Bắt đầu với một giá trị.
Nhân đôi giá trị đó (tác vụ 1).
Cộng thêm 10 vào kết quả (tác vụ 2).

new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 1000); // Bắt đầu với số 1

}).then(function(result) { // .then() thứ nhất
  console.log(result); // 1
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(result * 2), 1000);
  });

}).then(function(result) { // .then() thứ hai
  console.log(result); // 2
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(result + 10), 1000);
  });

}).then(function(result) { // .then() thứ ba
  console.log(result); // 12
});

Mỗi .then() nhận kết quả từ Promise trước đó, thực hiện một tác vụ và trả về một Promise mới cho .then() tiếp theo.

Cách truyền dữ liệu giữa các `.then()` trong chuỗi

Việc truyền dữ liệu rất đơn giản. Giá trị mà bạn resolve trong một Promise sẽ trở thành tham số đầu vào cho hàm callback của .then() kế tiếp. Nếu bạn chỉ trả về một giá trị thông thường (không phải Promise) từ một .then(), nó sẽ được bọc lại trong một Promise đã resolve và truyền ngay lập tức cho .then() sau đó.

Promise.resolve(10) // Bắt đầu với một Promise đã resolve giá trị 10
  .then(value => {
    console.log("Bước 1:", value); // 10
    return value * 2; // Trả về một giá trị thường
  })
  .then(value => {
    console.log("Bước 2:", value); // 20
    return value + 5;
  })
  .then(value => {
    console.log("Kết quả cuối cùng:", value); // 25
  });

Cách viết này gọn gàng và dễ hiểu hơn nhiều đúng không nào?

*Promise Chaining: Nối chuỗi các tác vụ bất đồng bộ một cách logic*

Các phương thức tĩnh hữu ích của Promise

Bên cạnh việc tạo và sử dụng các instance Promise, đối tượng Promise còn cung cấp một số phương thức tĩnh rất hữu ích để xử lý các kịch bản phức tạp hơn.

`Promise.all()`: Khi bạn cần tất cả Promise hoàn thành

Giả sử bạn cần thực hiện nhiều lệnh gọi API độc lập và chỉ muốn tiếp tục khi tất cả chúng đều trả về kết quả thành công. Promise.all() là công cụ hoàn hảo cho việc này. Nó nhận vào một mảng các Promise và trả về một Promise mới.

Promise này sẽ fulfilled khi tất cả Promise trong mảng đều fulfilled. Giá trị trả về là một mảng chứa kết quả của từng Promise, theo đúng thứ tự ban đầu.
Nó sẽ rejected ngay lập tức nếu chỉ cần một Promise trong mảng bị rejected.

const promise1 = Promise.resolve('Hello');
const promise2 = new Promise(resolve => setTimeout(() => resolve('World'), 1000));
const promise3 = fetch('https://api.example.com/data');

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values); // ['Hello', 'World', <Response object>]
  })
  .catch(error => {
    console.error("Một trong các promise đã thất bại:", error);
  });

`Promise.race()`: Khi bạn chỉ cần Promise nhanh nhất về đích

Ngược lại với Promise.all(), Promise.race() cũng nhận một mảng các Promise nhưng nó sẽ giải quyết ngay khi Promise đầu tiên trong mảng được giải quyết (fulfilled hoặc rejected). Giống như một cuộc đua, ai về đích trước sẽ quyết định kết quả chung cuộc.

Phương thức này rất hữu ích khi bạn muốn thực hiện một tác vụ có thời gian chờ (timeout).

const promiseFetch = fetch('/resource-that-may-take-a-while');
const promiseTimeout = new Promise((_, reject) =>
  setTimeout(() => reject(new Error('Request timed out')), 5000)
);

Promise.race([promiseFetch, promiseTimeout])
  .then(response => console.log('Tải thành công!'))
  .catch(error => console.error(error.message)); // Sẽ báo lỗi nếu fetch mất hơn 5 giây

`Promise.resolve()` và `Promise.reject()`: Lối tắt để tạo Promise

Đây là hai phương thức tiện lợi để tạo nhanh một Promise đã ở trạng thái giải quyết.

Promise.resolve(value): Tạo một Promise đã được fulfilled với giá trị được cung cấp.
Promise.reject(reason): Tạo một Promise đã bị rejected với lý do được cung cấp.

Chúng đặc biệt hữu ích khi bạn cần trả về một Promise trong một hàm nhưng bạn đã có sẵn kết quả một cách đồng bộ.

*Các phương thức tĩnh hữu ích của Promise*

Async/Await: Cú pháp hiện đại để làm việc với Promise

Mặc dù Promise đã là một bước tiến lớn, async/await còn đưa việc lập trình bất đồng bộ lên một tầm cao mới về sự đơn giản và dễ đọc. Đây là một cú pháp được xây dựng dựa trên Promise.

Async/Await có phải là một Promise không?

Câu trả lời vừa là có, vừa là không. Async/await không phải là một loại Promise mới, mà là một “lớp vỏ cú pháp” (syntactic sugar) giúp bạn làm việc với Promise một cách trực quan hơn.

Một hàm được khai báo với từ khóa async sẽ luôn ngầm trả về một Promise.
Từ khóa await chỉ có thể được sử dụng bên trong một hàm async. Nó sẽ tạm dừng việc thực thi hàm cho đến khi Promise mà nó chờ đợi được giải quyết.

Cách viết lại mã Promise bằng Async/Await cho dễ đọc hơn

Hãy xem lại ví dụ về promise chaining ở trên và viết lại nó bằng async/await. Bạn sẽ thấy sự khác biệt rõ rệt.

Sử dụng Promise chaining:

function doWork() {
  return Promise.resolve(10)
    .then(value => value * 2)
    .then(value => value + 5);
}
doWork().then(console.log); // 25

Sử dụng Async/Await:

async function doWorkAsync() {
  const step1Result = await Promise.resolve(10);
  const step2Result = step1Result * 2;
  const finalResult = step2Result + 5;
  return finalResult;
}
doWorkAsync().then(console.log); // 25

Đoạn mã với async/await trông gần như mã đồng bộ thông thường. Nó phẳng, tuần tự và rất dễ theo dõi luồng dữ liệu.

Xử lý lỗi với try…catch trong hàm async

Một ưu điểm lớn khác của async/await là cách xử lý lỗi. Thay vì sử dụng chuỗi .catch(), bạn có thể dùng khối try...catch quen thuộc, giống như khi xử lý lỗi trong mã đồng bộ. Điều này giúp tập trung logic xử lý lỗi vào một nơi duy nhất và làm cho mã sạch sẽ hơn.

async function fetchUserData() {
  try {
    const response = await fetch('https://api.invalid.url/user');
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Đã có lỗi xảy ra:', error);
  }
}

fetchUserData();

*Async/Await: Cú pháp hiện đại để làm việc với Promise*

Lời kết

Hành trình của chúng ta từ việc tìm hiểu nỗi đau Callback Hell đến việc làm chủ Promise và cú pháp thanh lịch async/await đã đến hồi kết. Promise không chỉ là một công cụ, nó là một tư duy mới về cách xử lý các tác vụ bất đồng bộ trong JavaScript. Việc nắm vững nó sẽ giúp bạn viết mã nguồn mạnh mẽ, dễ bảo trì và hiệu quả hơn.

Hy vọng bài viết này của WiWeb đã cung cấp cho bạn một cái nhìn toàn diện và dễ hiểu về promise javascript. Hãy thực hành thật nhiều với các ví dụ, vì đó là cách tốt nhất để biến kiến thức thành kỹ năng.

Bạn còn thắc mắc nào về chủ đề này không? Hãy để lại bình luận bên dưới nhé!

Nếu bạn cần một website chuyên nghiệp để phát triển thương hiệu, WiWeb luôn sẵn sàng tư vấn. Liên hệ với chúng tôi nhé!

5/5 - (126 Đánh giá)

Lý Văn Hiếu

Anh Hiếu là chuyên gia có tư duy tổng thể, kết hợp nền tảng kỹ thuật lập trình (PHP, MySQL, WordPress, Flatsome) từ ĐH Công nghệ Thông tin (UIT) với chiến lược SEO sắc bén (kinh nghiệm từ GOBRANDING). Anh hiện đang dẫn dắt cả hai team Web và SEO tại WiWeb & WIFIM, đảm bảo mọi website ra đời đều là một cỗ máy tối ưu hoàn hảo cho cả người dùng và Google.

Bình luận