Giới Thiệu
Bạn có muốn nâng cao kỹ năng lập trình JavaScript của mình và tìm hiểu về cách sử dụng Promise để xử lý bất đồng bộ một cách hiệu quả hơn? Bài viết này sẽ cung cấp cho bạn cái nhìn sâu sắc về Promise, từ các khái niệm cơ bản đến các ví dụ thực tiễn.
Promise Là Gì?
Trong JavaScript, Promise được hiểu như một lời hứa trong đời thực. Promise có ba trạng thái:
- Pending (đang chờ xử lý): Trạng thái ban đầu, trước khi Promise được thực hiện.
- Fulfilled (đã hoàn thành): Trạng thái khi Promise đã được thực hiện thành công.
- Rejected (đã bị từ chối): Trạng thái khi Promise thất bại và không thể thực hiện.
Tại Sao Nên Sử Dụng Promise?
Trước khi có Promise, việc xử lý các tác vụ bất đồng bộ thường dựa vào callback, dẫn đến mã nguồn trở nên khó đọc và dễ gây cảm giác rối rắm. Hãy xem ví dụ dưới đây:
javascript
getData(function (data) {
processData(data, function (result) {
saveData(result, function (response) {
console.log("Tất cả đã hoàn thành!");
});
});
});Với sự ra đời của Promise, mã nguồn của bạn sẽ trở nên gọn gàng hơn:
javascript
getData()
.then(processData)
.then(saveData)
.then(() => console.log("Tất cả đã hoàn thành!"))
.catch((error) => console.error("Có điều gì đó không ổn:", error));Cách Tạo Một Promise Đơn Giản
Dưới đây là cách đơn giản để bạn tạo một Promise:
javascript
const myPromise = new Promise((resolve, reject) => {
const success = true; // Thay đổi thành false để kiểm tra trạng thái từ chối
if (success) {
resolve("Yay! Nó đã hoạt động! 🎉");
} else {
reject("Ôi không! Có gì đó không ổn. 😢");
}
});Sử dụng Promise:
javascript
myPromise
.then((message) => console.log(message))
.catch((error) => console.error(error));Ví Dụ Thực Tế Về Sử Dụng Promise
Một trong những ví dụ phổ biến nhất khi sử dụng Promise là với hàm fetch để lấy dữ liệu từ API:
javascript
fetch("https://jsonplaceholder.typicode.com/users/1")
.then((response) => response.json()) // Chuyển đổi phản hồi sang JSON
.then((data) => console.log("Dữ liệu người dùng:", data)) // In dữ liệu ra
.catch((error) => console.error("Lỗi khi lấy dữ liệu:", error)); // Xử lý lỗiNối Chuỗi Promise
Bạn có thể kết nối nhiều Promise bằng cách sử dụng .then, cho phép thực hiện nhiều bước xử lý liên tiếp:
javascript
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => response.json())
.then((post) => {
console.log("Tiêu đề bài viết:", post.title);
return fetch(`https://jsonplaceholder.typicode.com/users/${post.userId}`);
})
.then((response) => response.json())
.then((user) => console.log("Tác giả:", user.name))
.catch((error) => console.error("Có điều gì đó không ổn:", error));Xử Lý Lỗi Với Promise
Khối .catch là nơi xử lý mọi lỗi trong chuỗi Promise:
javascript
fetch("https://jagroopurl.com") // Đây là một URL không hợp lệ
.then((response) => response.json())
.catch((error) => console.error("Ôi không, lỗi đã bị bắt ở đây:", error));Mẹo hữu ích: Luôn thêm .catch vào cuối mỗi chuỗi Promise để tránh lỗi không được xử lý.
Tạo Nhiều Promise Song Song Với Promise.all
Bạn có thể chạy nhiều Promise cùng một lúc bằng Promise.all:
javascript
const promise1 = fetch("https://jsonplaceholder.typicode.com/posts/1");
const promise2 = fetch("https://jsonplaceholder.typicode.com/posts/2");
Promise.all([promise1, promise2])
.then((responses) => Promise.all(responses.map((r) => r.json())))
.then((data) => console.log("Cả hai bài viết:", data))
.catch((error) => console.error("Một hoặc nhiều Promise đã thất bại:", error));Bộ Đếm Thời Gian Dựa Trên Promise
Bạn cũng có thể xây dựng một hàm bộ đếm thời gian sử dụng Promise:
javascript
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
wait(2000).then(() => console.log("2 giây sau... ⏰"));Hy vọng rằng thông tin trong bài viết này sẽ hữu ích cho bạn trong việc tìm hiểu và áp dụng Promise trong JavaScript! Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại để lại ý kiến của bạn ở dưới.
source: viblo
