Lời hứa về JavaScript
"Tôi hứa một kết quả!"
"Sản xuất mã" là mã có thể mất một chút thời gian
"Mã tiêu dùng" là mã phải đợi kết quả
Lời hứa là một đối tượng JavaScript liên kết sản xuất mã và sử dụng mã
Đối tượng Hứa hẹn của JavaScript
Đối tượng Promise trong JavaScript chứa cả mã sản xuất và các lệnh gọi đến mã tiêu thụ:
Cú pháp Promise
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:
| Kết quả | 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 Promise
Một đối tượng Promise trong JavaScript có thể là:
- Chưa giải quyết
- Hoàn thành
- Bác bỏ
Đối tượng Promise hỗ trợ hai thuộc tính: trạng thái và kết quả .
Trong khi một đối tượng Promise đ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" | chưa xác định |
| "hoàn thành" | một giá trị kết quả |
| "bác 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 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 bạn có thể thêm lệnh gọi lại chỉ khi thành công hoặc thất bại.
Thí 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 trong JavaScript
Để chứng minh việc sử dụng các lời hứa, chúng tôi sẽ sử dụng các ví dụ gọi lại từ chương trước:
- Đang chờ hết thời gian chờ
- Đang đợi một tệp
Đang chờ hết thời gian chờ
Ví dụ sử dụng Callback
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Ví dụ sử dụng lời hứa
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Đang đợi 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.htm");
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 đây 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 |