JavaScript Promise

"Tôi cam kết một kết quả!"

"Producing code (mã sản xuất)" là mã cần một khoảng thời gian

"Consuming code (mã tiêu thụ)" là mã phải chờ kết quả

Promise là một đối tượng JavaScript liên kết mã tạo ra và mã tiêu thụ

Đối tượng Promise của JavaScript

Đối tượng Promise của JavaScript bao gồm mã sản xuất và gọi mã tiêu thụ:

Cú pháp Promise

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (thể cần một khoảng thời gian)
  myResolve(); // Khi thành công
  myReject();  // Khi xảy ra lỗi
});
// "Consuming Code" (phải chờ một cam kết được hoàn thành)
myPromise.then(
  function(value) { /* Mã khi thành công */ },
  function(error) { /* Mã khi xảy ra lỗi */ }
);

Khi thực thi mã nhận được kết quả, nó nên gọi một trong hai hàm回调:

Kết quả Gọi
Thành công myResolve(giá trị kết quả)
Lỗi myReject(dối tượng lỗi)

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

Đối tượng Promise của JavaScript có thể là:

  • Pending
  • Fulfilled
  • Rejected

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

Khi đối tượng Promise "pending" (đang làm việc), kết quả là undefined。

Khi đối tượng Promise "fulfilled", kết quả là một giá trị。

Khi đối tượng Promise là "rejected", kết quả 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

Bạn không thể truy cập thuộc tính Promise state và result。

Bạn phải sử dụng phương pháp Promise để xử lý Promise。

Làm thế nào để sử dụng Promise

Dưới đây là cách sử dụng Promise:

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

Promise.then() có hai tham số, một là hàm回调 khi thành công, một là hàm回调 khi thất bại.

Cả hai đều là tùy chọn, vì vậy bạn có thể thêm hàm回调 cho thành công hoặc thất bại.

Mô hình

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// Tạo mã (đ这可能需要一些时间)
  if (x == 0) {
    myResolve("OK");
  }
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Thử ngay

Ví dụ Promise trong JavaScript

Để minh họa việc sử dụng Promise, chúng ta sẽ sử dụng ví dụ hàm回调 từ chương trước:

  • Chờ quá thời gian
  • Chờ tệp

Chờ quá thời gian

Ví dụ sử dụng hàm回调

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Thử ngay

Ví dụ sử dụng Promise

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Thử ngay

Chờ tệp

Ví dụ sử dụng hàm回调

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

Thử ngay

Ví dụ sử dụng Promise

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.htm");
  req.onload = function() {
    if (req.status == 200) {
      myResolve(req.response);
    }
      myReject("Tệp không tìm thấy");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Thử ngay

Hỗ trợ trình duyệt

ECMAScript 2015, cũng được gọi là ES6, đã giới thiệu đối tượng Promise của JavaScript.

Bảng dưới đây liệt kê phiên bản trình duyệt đầu tiên hỗ trợ đối tượng Promise hoàn toàn:

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Tháng 2 năm 2014 Tháng 7 năm 2015 Tháng 4 năm 2014 Tháng 9 năm 2014 Tháng 3 năm 2014