JavaScript Async
"async and await ทำให้สัญญาง่ายต่อการเขียน"
asyncทำให้ฟังก์ชันส่งคืน Promise
awaitทำให้ฟังก์ชั่นรอ Promise
ไวยากรณ์ Async
คีย์เวิร์ดasync
ก่อนที่ฟังก์ชันจะทำให้ฟังก์ชันส่งคืนสัญญา:
ตัวอย่าง
async function myFunction() {
return "Hello";
}
เหมือนกับ:
function myFunction() {
return Promise.resolve("Hello");
}
นี่คือวิธีการใช้สัญญา:
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
ตัวอย่าง
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
หรือง่ายกว่านั้น เนื่องจากคุณคาดหวังค่าปกติ (การตอบสนองปกติ ไม่ใช่ข้อผิดพลาด):
ตัวอย่าง
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
รอไวยากรณ์
คีย์เวิร์ด await
ก่อนที่ฟังก์ชันจะทำให้ฟังก์ชันรอสัญญา:
let value = await promise;
await
คีย์เวิร์ดสามารถใช้ได้ภายใน
ฟังก์ชันasync
เท่านั้น
ตัวอย่าง
มาช้าและเรียนรู้วิธีการใช้งานกัน
ไวยากรณ์พื้นฐาน
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
อาร์กิวเมนต์ทั้งสอง (แก้ไขและปฏิเสธ) ถูกกำหนดไว้ล่วงหน้าโดย JavaScript
เราจะไม่สร้างพวกมัน แต่เรียกหนึ่งในนั้นเมื่อฟังก์ชันตัวดำเนินการพร้อม
บ่อยครั้งที่เราไม่ต้องการฟังก์ชันการปฏิเสธ
ตัวอย่างที่ไม่มีการปฏิเสธ
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
รอการหมดเวลา
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
กำลังรอไฟล์
async function getFile() {
let myPromise = new Promise(function(resolve) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
} else {
resolve("File not Found");
}
};
req.send();
});
document.getElementById("demo").innerHTML = await myPromise;
}
getFile();
รองรับเบราว์เซอร์
ECMAScript 2017 แนะนำคำหลัก JavaScript
async
และawait
.
ตารางต่อไปนี้กำหนดเบราว์เซอร์รุ่นแรกที่รองรับทั้งสองอย่างเต็มรูปแบบ:
Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
Dec, 2016 | Apr, 2017 | Mar, 2017 | Sep, 2017 | Dec, 2016 |