Lời hứa JavaScript
"Tôi hứa sẽ có kết quả!"
"Sản xuất mã" là mã có thể mất một chút thời gian
"Tiêu thụ mã" là mã phải chờ kết quả
Lời hứa là một Đối tượng liên kết Mã sản xuất và Mã tiêu thụ
Đối tượng hứa hẹn JavaScript
Một Promise chứa cả mã sản xuất và lệnh gọi đến mã tiêu thụ:
Cú pháp hứa hẹn
let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
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:
| Khi | Gọi |
|---|---|
| Thành công | myResolve(giá trị kết quả) |
| Lỗi | myReject(đối tượng lỗi) |
Thuộc tính đối tượng hứa hẹn
Một đối tượng Promise JavaScript có thể là:
- Chưa giải quyết
- Hoàn thành
- Vật bị loại bỏ
Đối tượng Promise hỗ trợ hai thuộc tính: state và result .
Trong khi đối tượng Promise đang "đang chờ xử lý" (đang hoạt động), kết quả là không xác định.
Khi một đối tượng Promise được "hoàn thành", kết quả là một giá trị.
Khi một đối tượng Promise bị "từ chối", kết quả là một đối tượng lỗi.
| myPromise.state | myPromise.result |
|---|---|
| "chưa giải quyết" | không xác định |
| "hoàn thành" | một giá trị kết quả |
| "vật bị loại bỏ" | một đối tượng lỗi |
Bạn không thể truy cập trạng thái và kết quả thuộc tính Promise.
Bạn phải sử dụng phương thức Promise để xử lý các lời hứa.
Hứa làm thế nào
Đây là cách sử dụng Lời hứa:
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Promise.then() nhận hai đối số, một đối số gọi lại để thành công và một đối số khác cho thất bại.
Cả hai đều là tùy chọn, vì vậy bạn chỉ có thể thêm lệnh gọi lại cho thành công hoặc thất bại.
Ví dụ
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
let x = 0;
// The producing code (this may take some time)
if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Ví dụ về lời hứa JavaScript
Để chứng minh việc sử dụng lời hứa, chúng ta sẽ sử dụng các ví dụ gọi lại từ chương trước:
- Đang chờ thời gian chờ
- Đang chờ một tập tin
Đang chờ thời gian chờ
Ví dụ sử dụng gọi lại
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
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;
});
Đang chờ một tập tin
Ví dụ sử dụng Gọi lại
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(req.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
Ví dụ sử dụng Promise
let myPromise = new Promise(function(myResolve, myReject) {
let 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);}
);
Hỗ trợ trình duyệt
ECMAScript 2015, còn được gọi là ES6, đã giới thiệu đối tượng JavaScript Promise.
Bảng sau xác định phiên bản trình duyệt đầu tiên có hỗ trợ đầy đủ cho các đối tượng Promise:
| Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
| Feb, 2014 | Jul, 2015 | Apr, 2014 | Sep, 2014 | Mar, 2014 |
