สัญญาจาวาสคริปต์
"ฉันสัญญาผลลัพธ์!"
"รหัสการผลิต" เป็นรหัสที่อาจใช้เวลานาน
“รหัสบริโภค” คือรหัสที่ต้องรอผล
Promise เป็นอ็อบเจ็กต์ JavaScript ที่เชื่อมโยงการสร้างโค้ดและการใช้โค้ด
JavaScript Promise Object
ออบเจ็กต์ Promise ของ JavaScript มีทั้งโค้ดการผลิตและการเรียกใช้โค้ดที่ใช้:
สัญญาไวยากรณ์
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 */ }
);
เมื่อรหัสการผลิตได้รับผลลัพธ์ ควรเรียกหนึ่งในสองการเรียกกลับ:
ผลลัพธ์ | เรียก |
---|---|
ความสำเร็จ | myResolve (ค่าผลลัพธ์) |
ข้อผิดพลาด | myReject (วัตถุข้อผิดพลาด) |
สัญญาคุณสมบัติของวัตถุ
วัตถุสัญญา JavaScript สามารถ:
- รอดำเนินการ
- สำเร็จ
- ถูกปฏิเสธ
ออบเจ็กต์ Promise รองรับคุณสมบัติสองประการ: stateและresult
ในขณะที่วัตถุ Promise "รอดำเนินการ" (ทำงาน) ผลลัพธ์จะไม่ถูกกำหนด
เมื่อ Promise object ถูก "fulfilled" ผลลัพธ์จะเป็นค่า
เมื่อ Promise object ถูก "rejected" ผลลัพธ์จะเป็น error object
myPromise.state | myPromise.result |
---|---|
"รอดำเนินการ" | ไม่ได้กำหนด |
"สำเร็จ" | ค่าผลลัพธ์ |
"ปฏิเสธ" | วัตถุผิดพลาด |
คุณไม่สามารถเข้าถึง สถานะคุณสมบัติ Promise และผลลัพธ์ได้
คุณต้องใช้วิธี Promise เพื่อจัดการกับสัญญา
สัญญา ฮาวทู
นี่คือวิธีการใช้ Promise:
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Promise.then() ใช้อาร์กิวเมนต์สองข้อ เรียกกลับเพื่อความสำเร็จ และอีกข้อหนึ่งสำหรับความล้มเหลว
ทั้งสองตัวเลือกเป็นทางเลือก ดังนั้นคุณสามารถเพิ่มการเรียกกลับสำหรับความสำเร็จหรือความล้มเหลวเท่านั้น
ตัวอย่าง
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);}
);
ตัวอย่างสัญญาจาวาสคริปต์
เพื่อสาธิตการใช้คำสัญญา เราจะใช้ตัวอย่างการโทรกลับจากบทที่แล้ว:
- รอการหมดเวลา
- กำลังรอไฟล์
รอการหมดเวลา
ตัวอย่างการใช้งาน Callback
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
ตัวอย่างการใช้ Promise
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
กำลังรอไฟล์
ตัวอย่างการใช้ Callback
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);
ตัวอย่างการใช้ 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);}
);
รองรับเบราว์เซอร์
ECMAScript 2015 หรือที่เรียกว่า ES6 ได้แนะนำวัตถุ JavaScript Promise
ตารางต่อไปนี้กำหนดเบราว์เซอร์รุ่นแรกที่รองรับอ็อบเจ็กต์ Promise อย่างเต็มรูปแบบ:
Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
Feb, 2014 | Jul, 2015 | Apr, 2014 | Sep, 2014 | Mar, 2014 |