tek4

Promise trong JavaScript

by - September. 25, 2021
Kiến thức
Học
<p><img class="aligncenter wp-image-8234 size-full" src="https://tek4.vn/wp-content/uploads/2021/02/Capture-59.png" alt="Promise trong JavaScript" width="751" height="439" /></p> <p>Trong b&agrave;i viết n&agrave;y, ta sẽ c&ugrave;ng t&igrave;m hiểu về Promise trong JavaScript c&ugrave;ng với sự trợ gi&uacute;p của c&aacute;c v&iacute; dụ dẫn chứng.</p> <h1>Promise trong JavaScript</h1> <p>Trong JavaScript, Promise l&agrave; một c&aacute;ch tốt để xử l&yacute; c&aacute;c hoạt động kh&ocirc;ng đồng bộ. N&oacute; được sử dụng để kiểm tra việc hoạt động kh&ocirc;ng đồng bộ c&oacute; được ho&agrave;n th&agrave;nh th&agrave;nh c&ocirc;ng hay kh&ocirc;ng.</p> <p>Promise c&oacute; thể c&oacute; một trong ba trạng th&aacute;i sau:</p> <ol> <li>Đang chờ xử l&yacute;.</li> <li>Ho&agrave;n th&agrave;nh.</li> <li>Từ chối.</li> </ol> <p>Một Promise sẽ bắt đầu ở trạng th&aacute;i đang chờ xử l&yacute;. Điều đ&oacute; c&oacute; nghĩa l&agrave; qu&aacute; tr&igrave;nh n&agrave;y chưa ho&agrave;n tất. Nếu thao t&aacute;c th&agrave;nh c&ocirc;ng, qu&aacute; tr&igrave;nh kết th&uacute;c ở trạng th&aacute;i ho&agrave;n th&agrave;nh. V&agrave;, nếu xảy ra lỗi, qu&aacute; tr&igrave;nh sẽ kết th&uacute;c ở trạng th&aacute;i bị từ chối.</p> <p>V&iacute; dụ: Khi ta y&ecirc;u cầu dữ liệu từ m&aacute;y chủ bằng c&aacute;ch sử dụng một Promise, n&oacute; sẽ ở trạng th&aacute;i chờ xử l&yacute;. Khi dữ liệu đến th&agrave;nh c&ocirc;ng, n&oacute; sẽ ở trạng th&aacute;i ho&agrave;n th&agrave;nh. Nếu lỗi xảy ra, th&igrave; n&oacute; sẽ ở trạng th&aacute;i từ chối.</p> <h2>Tạo một Promise</h2> <p>Để tạo một đối tượng Promise, ch&uacute;ng ta c&oacute; thể sử dụng h&agrave;m tạo <code class="EnlighterJSRAW" data-enlighter-language="generic">Promise()</code>.</p> <pre class="EnlighterJSRAW" data-enlighter-language="generic">let a = new Promise(function(resolve, reject){ &nbsp;&nbsp;&nbsp;&nbsp; //Đoạn m&atilde; });</pre> <p>H&agrave;m tạo Promise() nhận một h&agrave;m l&agrave;m đối số. H&agrave;m n&agrave;y cũng chấp nhận hai h&agrave;m l&agrave; <code class="EnlighterJSRAW" data-enlighter-language="generic">resolve()</code>v&agrave; <code class="EnlighterJSRAW" data-enlighter-language="generic">reject()</code>. Nếu Promise trả về th&agrave;nh c&ocirc;ng, h&agrave;m resolve() được gọi. V&agrave;, nếu c&oacute; lỗi xảy ra, h&agrave;m reject() được gọi.</p> <p>Giả sử rằng chương tr&igrave;nh dưới đ&acirc;y l&agrave; một chương tr&igrave;nh kh&ocirc;ng đồng bộ. Tuy nhi&ecirc;n, chương tr&igrave;nh sau đ&oacute; c&oacute; thể được xử l&yacute; bằng c&aacute;ch sử dụng đối tượng Promise.</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let vi_du = new Promise(function (resolve, reject) { &nbsp;&nbsp;&nbsp; if (true) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; resolve("Xử l&yacute; xong"); &nbsp;&nbsp;&nbsp; } else { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; reject("Từ chối"); &nbsp;&nbsp;&nbsp; } }); console.log(vi_du);</pre> <p>Kết quả:</p> <pre>Promise {'Xử l&yacute; xong'}</pre> <p>Trong chương tr&igrave;nh tr&ecirc;n, một đối tượng Promise được tạo ra v&agrave; chứa hai h&agrave;m: solve() v&agrave; reject(). H&agrave;m solve() sẽ được sử dụng nếu qu&aacute; tr&igrave;nh th&agrave;nh c&ocirc;ng v&agrave; 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&atilde;n l&agrave; đ&uacute;ng.</p> <h2>Promise Chaining trong JavaScript</h2> <p>Promise sẽ rất hữu &iacute;ch khi ta phải xử l&yacute; nhiều hơn một t&aacute;c vụ kh&ocirc;ng đồng bộ. Để giải quyết điều n&agrave;y, ch&uacute;ng ta sẽ sử dụng Promise Chaining.</p> <p>Ta c&oacute; thể thực hiện một thao t&aacute;c sau khi một Promise được giải quyết bằng c&aacute;ch sử dụng c&aacute;c phương thức <code class="EnlighterJSRAW" data-enlighter-language="generic">then()</code>, <code class="EnlighterJSRAW" data-enlighter-language="generic">catch()</code>v&agrave; <code class="EnlighterJSRAW" data-enlighter-language="generic">finally()</code>.</p> <h3>Phương thức then()</h3> <p>Phương thức then() được sử dụng với h&agrave;m Callback khi Promise được thực hiện hoặc giải quyết th&agrave;nh c&ocirc;ng.</p> <p><em>C&uacute; ph&aacute;p của phương thức then() như sau:</em></p> <pre class="EnlighterJSRAW" data-enlighter-language="generic">Đối_tượng.then(Ho&agrave;n_th&agrave;nh, Từ_chối);</pre> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let vi_du = new Promise(function (resolve, reject) { resolve('Giải quyết xong'); }); vi_du.then( function vi_du2() { console.log("Xử l&yacute; tiếp"); }, ) .then( function vi_du3() { console.log('Xử l&yacute; tiếp'); }, ); </pre> <p>Trong chương tr&igrave;nh tr&ecirc;n, phương thức then() được sử dụng để nối c&aacute;c h&agrave;m cho Promise. Phương thức then() sẽ được gọi khi Promise được giải quyết th&agrave;nh c&ocirc;ng. Ngo&agrave;i ra, ta c&oacute; thể nối nhiều phương thức then() với Promise.</p> <h3>Phương thức catch()</h3> <p>Phương thức catch() được sử dụng với h&agrave;m Callback khi Promise bị từ chối hoặc nếu xảy ra lỗi.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let vi_du = new Promise(function (resolve, reject) { &nbsp;&nbsp; reject('Từ chối'); }); vi_du.then( &nbsp;&nbsp;&nbsp; function vi_du2() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log("Xử l&yacute; tiếp"); &nbsp;&nbsp;&nbsp; }, &nbsp;) .catch( &nbsp;&nbsp;&nbsp; function vi_du3() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log('Lỗi xảy ra'); &nbsp;&nbsp;&nbsp; } );</pre> <p>Trong chương tr&igrave;nh tr&ecirc;n, Promise bị từ chối. V&agrave; phương thức catch() được sử dụng cho Promise để xử l&yacute; lỗi.</p> <h2>So s&aacute;nh đối tượng Promise với h&agrave;m Callback</h2> <p>Promise tương tự như c&aacute;c h&agrave;m Callback theo nghĩa l&agrave; cả hai đều c&oacute; thể được sử dụng để xử l&yacute; c&aacute;c t&aacute;c vụ kh&ocirc;ng đồng bộ. C&aacute;c h&agrave;m Callback trong JavaScript cũng c&oacute; thể được sử dụng để thực hiện c&aacute;c t&aacute;c vụ đồng bộ.</p> <p>Tuy nhi&ecirc;n ch&uacute;ng c&oacute; một số điểm kh&aacute;c biệt sau:</p> <p><em>1. Promise</em></p> <ul> <li>C&uacute; ph&aacute;p đơn giản hơn cho người d&ugrave;ng v&agrave; dễ đọc.</li> <li>Dễ d&agrave;ng xử l&yacute; lỗi.</li> </ul> <p><em>2. H&agrave;m Callback</em></p> <ul> <li>C&uacute; ph&aacute;p kh&oacute; hiểu hơn.</li> <li>Kh&oacute; xử l&yacute; lỗi hơn.</li> </ul> <h3>Phương thức finally()</h3> <p>Ta cũng c&oacute; thể sử dụng phương thức finally() với c&aacute;c Promise. Phương thức finally() được thực thi khi Promise bất kể được giải quyết th&agrave;nh c&ocirc;ng hoặc bị từ chối.</p> <p>V&iacute; dụ:</p> <pre class="EnlighterJSRAW" data-enlighter-language="js">let vi_du = new Promise(function (resolve, reject) { &nbsp;&nbsp;&nbsp; resolve('Xử l&yacute; th&agrave;nh c&ocirc;ng'); }); vi_du.finally( &nbsp;&nbsp;&nbsp; function finalFunc() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log('Được thực thi xong'); &nbsp;&nbsp;&nbsp; } );</pre> <h2>C&aacute;c phương thức của Promise</h2> <table> <tbody> <tr> <td style="text-align: center;">Phương thức</td> <td style="text-align: center;">M&ocirc; tả</td> </tr> <tr> <td>all(iterable)</td> <td>Chờ đợi tất cả c&aacute;c Promise được giải quyết hoặc bị từ chối.</td> </tr> <tr> <td>allSettled(iterable)</td> <td>Chờ đợi cho đến khi tất cả Promise được giải quyết hoặc từ chối.</td> </tr> <tr> <td>any(iterable)</td> <td>Trả về gi&aacute; trị của Promise ngay khi c&oacute; bất kỳ Promise n&agrave;o được ho&agrave;n th&agrave;nh.</td> </tr> <tr> <td>race(iterable)</td> <td>Chời đợi cho tới khi bất kỳ Promise n&agrave;o được giải quyết hoặc từ chối.</td> </tr> <tr> <td>reject(reason)</td> <td>Trả về đối tượng Promise mới m&agrave; bị từ chối.</td> </tr> <tr> <td>resolve(value)</td> <td>Trả về đối tượng Promise mới m&agrave; được giải quyết xong.</td> </tr> <tr> <td>catch()</td> <td>Gắn th&ecirc;m h&agrave;m Callback xử l&yacute; bị từ chối.</td> </tr> <tr> <td>then()</td> <td>Gắn th&ecirc;m h&agrave;m Callback xử l&yacute; được giải quyết xong.</td> </tr> <tr> <td>finally()</td> <td>Gắn th&ecirc;m h&agrave;m xử l&yacute; cho một Promise.</td> </tr> </tbody> </table> <p>Tr&ecirc;n đ&acirc;y l&agrave; kh&aacute;i niệm v&agrave; v&iacute; dụ cơ bản về Promise trong JavaScript. Hy vọng mọi người c&oacute; thể &aacute;p dụng v&agrave;o trong chương tr&igrave;nh của m&igrave;nh. Mọi người h&atilde;y tiếp tục theo d&otilde;i c&aacute;c b&agrave;i tiếp theo v&agrave; cập nhật c&aacute;c b&agrave;i mới nhất tr&ecirc;n <a href="http://tek4.vn">tek4</a> nh&eacute;!</p> <p>P/s: Cảm ơn mọi người đ&atilde; tin tưởng tek4!</p>