đối tượng promise javascript

"I PROMISE A RESULT!"
"Producing code" là mã có thể mất một chút thời gian
"Consuming code" là mã phải đợi kết quả
Promise là một đối tượng JavaScript liên kết giữa sản xuất mã và sử dụng mã

Đối tượng promise JavaScript

Đối tượng JavaScript Promise chứa cả mã sản xuất và các lệnh gọi đến mã sử dụng.

Cú pháp

var myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (Có thể mất chút thời gian)

  myResolve(); // Nếu thành công
  myReject();  // Nếu có lỗi
});

// "Consuming Code" (Phải chờ đối tượng Promise hoàn thành)
myPromise.then(
  function(value) { /* code nếu thành công */ },
  function(error) { /* code nếu có lỗi */ }
);

Khi mã sản xuất nhận được kết quả, nó sẽ gọi một trong hai lệnh gọi lại.

Kết quả	Gọi lại
Success	myResolve(Giá trị kết quả)
Error	myReject(Đối tượng lỗi)

Thuộc tính đối tượng promise

Đối tượng Promise trong JavaScript có thể là.

Pending
Fulfilled
Rejected

Đối tượng Promise hỗ trợ hai thuộc tính: state và result.

Trong khi một đối tượng Promise đang "pending" (đang hoạt động), result là không xác định.

Khi một đối tượng Promise được "Fulfilled" (hoàn thành), result là một giá trị.

Khi một đối tượng Promise bị "rejected" (từ chối), result là một đối tượng lỗi.

myPromise.state	myPromise.result
"pending"	undefined
"fulfilled"	Giá trị kết quả
"rejected"	Đối tượng lỗi

Chúng ta không thể truy cập thuộc tính status và result Promise .
Chúng ta phải sử dụng phương thức Promise để xử lý.

Cách sử dụng Promise

Sau đây là cách sử dụng Promise.

myPromise.then(
  function(value) { /* code nếu thành công */ },
  function(error) { /* code nếu có lỗi */ }
);

Promise.then() nhận hai đối số, một lệnh gọi lại cho thành công và một cho thất bại.
Cả hai đều là tùy chọn, vì vậy chúng ta có thể thêm lệnh gọi lại chỉ khi thành công hoặc thất bại.

Ví dụ

function myDisplayer(text) {
    document.getElementById('demo').innerHTML = text;    
} 

var myPromise = new Promise(function(myResolve, myReject) {
    var x = 0;
    // some code
    if (x == 0) {
        myResolve("OK");
    } else {
        myReject("ERROR");    
    }
});

myPromise.then(
    function (value) {myDisplayer(value)},
    function (value) {myDisplayer(value)}
);

Xem kết quả

Ví dụ về Promise trong JavaScript

Để chứng minh việc sử dụng Promise, chúng ta sẽ sử dụng các ví dụ hàm gọi lại từ bài trước.

Kết hợp với hàm setTimeout()

Ví dụ sử dụng Callback

Ví dụ

setTimeout(function() {myDisplayer("<h1>Hello JavaScript!</h1>")},3000);

function myDisplayer(text) {
    document.getElementById('demo').innerHTML = text;    
}

Xem kết quả

Ví dụ sử dụng Promise

Ví dụ

var myPromise = new Promise(function(myResolve, myReject) {    
    setTimeout(function() {myResolve("<h1>Hello JavaScript!</h1>");},3000)
});

myPromise.then(function(value) {document.getElementById('demo').innerHTML = value});

Xem kết quả

Tải một tập tin từ bên ngoài

Ví dụ sử dụng hàm gọi lại

Ví dụ

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function getFile(myCallback) {
  var req = new XMLHttpRequest();
  req.open('GET', "/exampleJS/mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}

getFile(myDisplayer);

Xem kết quả

Ví dụ sử dụng Promise

Ví dụ

function myDisplayer(text) {
    document.getElementById('demo').innerHTML = text;    
}

var myPromise = new Promise(function(myResolve, myReject) {
    var req = new XMLHttpRequest();
      req.open('GET', "mycar.html");
      req.onload = function() {
    if (req.status == 200) {
          myResolve(req.response);
    } else {
          myReject("File not Found");
    }
  };
  req.send();
    
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);