search

[PROMISE] Tìm hiểu về promise trong ES6

https://viblo.asia/p/tim-hieu-ve-promise-trong-es6-DXOkRjPPkdZ

hashtag
Ví dụ 1: Giả sử ta có một tác vụ muốn delay 5s rồi in ra chữ “LẬP” tiếp đó 3s in ra chú “TRÌNH” sau cùng 2s in ra chữ “JAVASCRIPT”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		setTimeout(function(){
       console.log('LẬP');
       setTimeout(function(){
           console.log('TRÌNH');
           setTimeout(function(){
              console.log('JAVASCRIPT');
          },2000);
       },3000);
    }, 5000);
    function handleTimeout(timeout) {
      return new Promise(function (resolve, reject) {
        setTimeout(resolve, timeout);
      });
    }
    var xxx = handleTimeout(5000);
    xxx.then(function () {
      console.log('LẬP');
    })
    .then(function () {
      return handleTimeout(3000);
    })
    .then(function () {
      console.log('TRÌNH')
    })
    .then(function () {
      return handleTimeout(1000);
    })
    .then(function () {
      console.log('JAVASCRIPT');
    });
	</script>
</body>
</html>

hashtag
ví dụ 2: Một trường hợp khác, nếu bạn có task là tổng hợp một thông tin lấy nhiều nguồn từ nhiều API. Không cách nào dễ dàng và tốt khi sử dụng Promise.all trong trường hợp này.

hashtag
Tìm hiểu về promise trong ES6

This post has been more than 4 years since it was last updated.

Promise được đưa vào Javascript từ ES6, đây có thể coi là một kỹ thuật nâng cao giúp xử lý vấn đề bất đồng bộ hiệu quả hơn. Trước đây kết quả của một tác vụ đồng bộ và bất đồng bộ sẽ trả về một kiểu dữ liệu nào đó hoặc thực hiện một Callback Function. Với trường hợp thực hiện Callback Function thì sẽ dễ xảy ra lỗi Callback Hell, nghĩa là gọi callback quá nhiều và lồng nhau nên dẫn đến không kiểm soát được chương trình hoặc bộ nhớ không đủ để hoạt động. Và trong bài viết này chúng ta sẽ tìm hiểu về Promise, một package được đưa vào từ ES6 giúp giải quyết vấn đề Callback Hell này.

hashtag
1. Promise là gì ?

  • Promise sinh ra để xử lý kết quả của một hành động cụ thể, kết quả của mỗi hành động sẽ là thành công hoặc thất bại và Promise sẽ giúp chúng ta giải quyết câu hỏi "Nếu thành công thì làm gì? Nếu thất bại thì làm gì?". Cả hai câu hỏi này ta gọi là một hành động gọi lại (callback action)

hashtag
2. Các trạng thái của promise

Khi một Promise được khởi tạo thì nó có một trong ba trạng thái sau:

  • Fulfilled: hành động xử lý xong và thành công

  • Rejected: hành động xử lý xong và thất bại

  • Pending: hành động đang chờ xử lý hoặc bị từ chối

Trong đó hai trạng thái Reject và Fulfilled ta gọi là Settled, tức là đã xử lý xong.

hashtag
3. Cách tạo 1 promise

  • Để tạo 1 promise chúng ta sử dụng cú pháp sau:

hashtag
5. Catch trong promise

then có hai tham số callbacks đó là success và error. Tuy nhiên bạn cũng có thể sử dụng phương thức catch để bắt lỗi. Cú pháp:

hashtag
6. Một vài ví dụ ứng dụng promise

Giả sử ta có một tác vụ muốn delay 5s rồi in ra chữ “LẬP” tiếp đó 3s in ra chú “TRÌNH” sau cùng 2s in ra chữ “JAVASCRIPT”

  • Nếu sử dụng hàm setTimeout thì chúng ta có thể viết như sau:

  • Nhìn khá là rắc rối đúng không nào. Chúng ta có thể viết lại bằng promise như sau.

Tiếp thêm 1 ví dụ ứng dụng promise. Lần này ta sẽ sử dụng FileReader để upload nhiều file ảnh. Yêu cầu là chỉ được upload những file có định dạng ảnh và đếm xem có bao nhiêu lỗi về định dạng file, bao nhiêu lỗi về load error file, bao nhiêu file được load success.

Hy vọng qua bài viết này sẽ giúp bạn hiểu thêm về promise trong ES6

Nguồn tham khảo: https://viblo.asia/asvenus/posts/p1PvQ3JAMldrarrow-up-right

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promisearrow-up-right

Previous[PROMISE] Promise.all()Next[PROMISE] Introduction to Promises

Last updated