Promise là gì? | How Kteam

Posted on by adminChuyên mục:Kiến thức Internet

Dẫn nhập

Trong bài viết ngày hôm nay, Kteam sẽ ra mắt cho những bạn một tính năng mới của Javascript ES6 : Promise .

Nội dung

Để theo dõi bài này tốt nhất, bạn nên xem qua bài :

  • Sổ tay Javascript
  • ECMAScript là gì?
  • Node.js là gì?
  • Cơ chế bất đồng bộ trong Javascript
  • Node.js hoạt động như thế nào?

Bài này sẽ giới thiệu những nội dung sau:

Bạn đang đọc: Promise là gì? | How Kteam

  • Promise là gì?
  • Cơ chế hoạt động của Promise
  • Tại sao phải sử dụng Promise?
  • Promise chaining

Promise là gì?

Promise object đại diện thay mặt cho việc triển khai xong hiệu quả ( hoặc sự thất bại ) từ một lệnh bất đồng bộ, và giá trị tác dụng của lệnh đó .
Mục đích của Promise là chính sách của nó giúp bạn thực thi những tác vụ đồng nhất hơn và tránh rơi vào thực trạng callback hell hay pyramid of doom, là thực trạng dùng những callback lồng nhau quá nhiều

Ta sẽ tạo promise object trải qua class Promise, class Promise lúc khởi tạo sẽ chứa 1 function để thực thi những tác vụ bất đồng bộ. Function sẽ có 2 tham số :

  • resolve: hàm được gọi khi promise hoàn thành
  • reject: hàm được gọi khi có sự cố

Ví dụ :


var promise = new Promise(function(resolve, reject) {

  setTimeout(function() {

    resolve('foo');

  }, 1000);

});



promise.then(function(value) {

  console.log(value);

});



console.log(promise);
  • Ta sẽ tạo ra một promise object; tại function bên trong, ta hẹn sau 1 giây sẽ gọi function resolve với kết quả ‘foo’
  •  Để xử lý khi promise có kết quả ta sẽ dùng phương thức then, rồi viết callback trong đó log ra value khi mà có kết quả

Ta sẽ xem hiệu quả của nó :

Cơ chế hoạt động của Promise

Một Promise có 1 trong 3 trạng thái sau :

  • pending: trạng thái khởi tạo
  • fulfilled: có nghĩa thao tác đã hoàn thành thành công
  • rejected: có nghĩa là thao tác thất bại

Một promise pending hoàn toàn có thể thành fulfilled với tác dụng, hoặc thành rejected với nguyên do ( error ). Khi option đó diễn ra, những handler tương quan sẽ thực thi

Ví dụ : Ta sẽ thử viết 1 Promise hoàn hảo có then và catch


var promise = new Promise(function(resolve, reject) {

  var value = Math.random()

  if (value > 0.5) {

    resolve(value)

  }

  reject('error')

});



promise.then(function(value) {

  console.log(value)

}).catch(function(error) {

  console.log(error)

})

Ta lấy 1 giá trị ngẫu nhiên, nếu lớn hơn 0.5 thì resolve nó ra, còn không thì reject lỗi

Ngoài ra, ta hoàn toàn có thể viết như thế này :


var promise = new Promise(function(resolve, reject) {

  var value = Math.random()

  if (value > 0.5) {

    resolve(value)

  }

  reject('error')

});



function onSuccess(value) { console.log(value) }

function onError(error) { console.log(error) }



promise.then(onSuccess, onError)

Tại sao phải sử dụng Promise?

Khi mà ta sử dụng callback function, ta phải viết callback xử lý tính toán ngay lập tức ( khi mà triển khai những thao tác bất đồng bộ ) nên khi mà xảy ra quá nhiều thao tác bất đồng bộ đang diễn ra, sẽ dẫn đến thực trạng những callback function lồng vào nhau .

Còn ở Promise, nó làm 1 bản cam kết sẽ thực hiện trong tương lai, ta không cần phải viết xử lý then ngay lập tức mà có thể để promise object lại đến khi sau này cần mới thực hiện.

Ví dụ : Ta cần chạy lệnh bất đồng bộ nhưng chưa cần viết hàm giải quyết và xử lý khi có tác dụng


var promise = new Promise(function(resolve, reject) {

   setTimeout(function callback() {

       console.log(8)

       resolve(8)

   }, 3000)

})

Khi chạy tác dụng ta hoàn toàn có thể thấy giá trị log 8 đã thực thi, có nghĩa khi ta tạo một object promise, thì thao tác bất đồng bộ đã được thực thi. Và khi resolve hay reject thì hiệu quả của giải quyết và xử lý bất đồng bộ này vẫn được lưu lại trong promise. Khi nào cần thì ta hoàn toàn có thể viết hàm giải quyết và xử lý tác dụng này .
Promise hoàn toàn có thể hiểu là 1 biến chứa tác dụng cuộc 1 lần thực thi bất đồng bộ. Nó khác với những giải quyết và xử lý callback là ta hoàn toàn có thể mang vác cái biến này đi khắp nơi trong code mà ta thấy tương thích. Tại đó gọi hàm then chứa callback giải quyết và xử lý .
Vậy khi giải quyết và xử lý quá nhiều lệnh bất đồng bộ thì sao. lúc đó mỗi bất đồng bộ là một object promise, ta sẽ gom những promise này lại rồi giải quyết và xử lý tại promise all như sau :


var promise1 = new Promise(function(resolve, reject) {

   setTimeout(function callback() {

       resolve(8)

   }, 3000)

})



var promise2 = new Promise(function(resolve, reject) {

   setTimeout(function callback() {

       resolve(2)

   }, 1000)

})



Promise.all([promise1, promise2]).then(function (values)  {

    console.log(values)

});

Như vậy, ta đã tránh được thực trạng callback hell khi hoàn toàn có thể tách biệt những giải quyết và xử lý bất đồng bộ ra riêng cho đến khi toàn bộ tác dụng bất đồng bộ đã có .
Lưu ý : Nếu trong một những promise có lỗi, thì promise.all sẽ giải quyết và xử lý phần catch thay vì giải quyết và xử lý then .

Promise chaining

Promise còn tương hỗ cho tất cả chúng ta một kỹ thuật khá hay giúp ta liên kết những promise liên tục lại với nhau. Vì phương pháp then ( ở trường hợp promise thành công xuất sắc ) khi return giá trị thì nó sẽ tạo một promise khác bọc lại giá trị đó, ta hoàn toàn có thể tạo nên phương pháp then phía sau để kết nối tiếp .

Ví dụ :


new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000);

}).then(function(result) {

  console.log('1:'+result)

  return result + 1

}).then(function(result) {

  console.log('2:'+result)

  return new Promise(function(resolve, reject) {

      setTimeout(() => resolve(result * 2), 1000);

  });

}).then(function(result) {

  console.log('3:'+result)

});

Lưu ý : Promise chaining phải cho những phương pháp then thông suốt nhau mới giải quyết và xử lý tuần tự. Tránh trường hợp viết như thế này :

var promise = new Promise(function(resolve, reject) {

  setTimeout(function () { resolve(1) }, 1000);

})

promise.then(function(result) {

  console.log(result); // 1

  return result * 2;

});


promise.then(function(result) {

  console.log(result); // 1

  return result * 2;

});

promise.then(function(result) {

  console.log(result); // 1

  return result * 2;

});

Bản chất, ta đang viết 3 phương pháp giải quyết và xử lý hiệu quả của promise đó :

Kết

Như vậy Kteam đã trình làng về Promise

Ở bài tiếp theo, Kteam sẽ giới thiệu cho các bạn
Async/Await là gì?

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

Thảo luận

Nếu bạn có bất kể khó khăn vất vả hay vướng mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI và ĐÁP trên thư viện Howkteam. com để nhận được sự tương hỗ từ hội đồng .

admin