Trong bài viết này, ta sẽ cùng tìm hiểu về Promise trong JavaScript cùng với sự trợ giúp của các ví dụ dẫn chứng.
Promise trong JavaScript
Trong JavaScript, Promise là một cách tốt để xử lý các hoạt động không đồng bộ. Nó được sử dụng để kiểm tra việc hoạt động không đồng bộ có được hoàn thành thành công hay không.
Promise có thể có một trong ba trạng thái sau:
- Đang chờ xử lý.
- Hoàn thành.
- Từ chối.
Một Promise sẽ bắt đầu ở trạng thái đang chờ xử lý. Điều đó có nghĩa là quá trình này chưa hoàn tất. Nếu thao tác thành công, quá trình kết thúc ở trạng thái hoàn thành. Và, nếu xảy ra lỗi, quá trình sẽ kết thúc ở trạng thái bị từ chối.
Ví dụ: Khi ta yêu cầu dữ liệu từ máy chủ bằng cách sử dụng một Promise, nó sẽ ở trạng thái chờ xử lý. Khi dữ liệu đến thành công, nó sẽ ở trạng thái hoàn thành. Nếu lỗi xảy ra, thì nó sẽ ở trạng thái từ chối.
Tạo một Promise
Để tạo một đối tượng Promise, chúng ta có thể sử dụng hàm tạo Promise().
|
1 2 3 |
let a = new Promise(function(resolve, reject){ //Đoạn mã }); |
Hàm tạo Promise() nhận một hàm làm đối số. Hàm này cũng chấp nhận hai hàm là resolve()và reject(). Nếu Promise trả về thành công, hàm resolve() được gọi. Và, nếu có lỗi xảy ra, hàm reject() được gọi.
Giả sử rằng chương trình dưới đây là một chương trình không đồng bộ. Tuy nhiên, chương trình sau đó có thể được xử lý bằng cách sử dụng đối tượng Promise.
|
1 2 3 4 5 6 7 8 |
let vi_du = new Promise(function (resolve, reject) { if (true) { resolve("Xử lý xong"); } else { reject("Từ chối"); } }); console.log(vi_du); |
Kết quả:
|
1 |
Promise {'Xử lý xong'} |
Trong chương trình trên, một đối tượng Promise được tạo ra và chứa hai hàm: solve() và reject(). Hàm solve() sẽ được sử dụng nếu quá trình thành công và reject() được sử dụng khi lỗi xảy ra trong Promise. Promise sẽ được giải quyết nếu điều kiện được thỏa mãn là đúng.
Promise Chaining trong JavaScript
Promise sẽ rất hữu ích khi ta phải xử lý nhiều hơn một tác vụ không đồng bộ. Để giải quyết điều này, chúng ta sẽ sử dụng Promise Chaining.
Ta có thể thực hiện một thao tác sau khi một Promise được giải quyết bằng cách sử dụng các phương thức then(), catch()và finally().
Phương thức then()
Phương thức then() được sử dụng với hàm Callback khi Promise được thực hiện hoặc giải quyết thành công.
Cú pháp của phương thức then() như sau:
|
1 |
Đối_tượng.then(Hoàn_thành, Từ_chối); |
Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let vi_du = new Promise(function (resolve, reject) { resolve('Giải quyết xong'); }); vi_du.then( function vi_du2() { console.log("Xử lý tiếp"); }, ) .then( function vi_du3() { console.log('Xử lý tiếp'); }, ); |
Trong chương trình trên, phương thức then() được sử dụng để nối các hàm cho Promise. Phương thức then() sẽ được gọi khi Promise được giải quyết thành công. Ngoài ra, ta có thể nối nhiều phương thức then() với Promise.
Phương thức catch()
Phương thức catch() được sử dụng với hàm Callback khi Promise bị từ chối hoặc nếu xảy ra lỗi.
Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let vi_du = new Promise(function (resolve, reject) { reject('Từ chối'); }); vi_du.then( function vi_du2() { console.log("Xử lý tiếp"); }, ) .catch( function vi_du3() { console.log('Lỗi xảy ra'); } ); |
Trong chương trình trên, Promise bị từ chối. Và phương thức catch() được sử dụng cho Promise để xử lý lỗi.
So sánh đối tượng Promise với hàm Callback
Promise tương tự như các hàm Callback theo nghĩa là cả hai đều có thể được sử dụng để xử lý các tác vụ không đồng bộ. Các hàm Callback trong JavaScript cũng có thể được sử dụng để thực hiện các tác vụ đồng bộ.
Tuy nhiên chúng có một số điểm khác biệt sau:
1. Promise
- Cú pháp đơn giản hơn cho người dùng và dễ đọc.
- Dễ dàng xử lý lỗi.
2. Hàm Callback
- Cú pháp khó hiểu hơn.
- Khó xử lý lỗi hơn.
Phương thức finally()
Ta cũng có thể sử dụng phương thức finally() với các Promise. Phương thức finally() được thực thi khi Promise bất kể được giải quyết thành công hoặc bị từ chối.
Ví dụ:
|
1 2 3 4 5 6 7 8 |
let vi_du = new Promise(function (resolve, reject) { resolve('Xử lý thành công'); }); vi_du.finally( function finalFunc() { console.log('Được thực thi xong'); } ); |
Các phương thức của Promise
| Phương thức | Mô tả |
| all(iterable) | Chờ đợi tất cả các Promise được giải quyết hoặc bị từ chối. |
| allSettled(iterable) | Chờ đợi cho đến khi tất cả Promise được giải quyết hoặc từ chối. |
| any(iterable) | Trả về giá trị của Promise ngay khi có bất kỳ Promise nào được hoàn thành. |
| race(iterable) | Chời đợi cho tới khi bất kỳ Promise nào được giải quyết hoặc từ chối. |
| reject(reason) | Trả về đối tượng Promise mới mà bị từ chối. |
| resolve(value) | Trả về đối tượng Promise mới mà được giải quyết xong. |
| catch() | Gắn thêm hàm Callback xử lý bị từ chối. |
| then() | Gắn thêm hàm Callback xử lý được giải quyết xong. |
| finally() | Gắn thêm hàm xử lý cho một Promise. |
Trên đây là khái niệm và ví dụ cơ bản về Promise trong JavaScript. Hy vọng mọi người có thể áp dụng vào trong chương trình của mình. Mọi người hãy tiếp tục theo dõi các bài tiếp theo và cập nhật các bài mới nhất trên tek4 nhé!
P/s: Cảm ơn mọi người đã tin tưởng tek4!
