จาวาสคริปต์อะซิงก์

สารบัญ

"async และ await ทำให้สัญญาเขียนได้ง่ายขึ้น"

async ทำให้ฟังก์ชันส่งคืนสัญญา

await ทำให้ฟังก์ชันรอ Promise

ไวยากรณ์แบบอะซิงก์

คำหลัก 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);}
);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

async function myFunction() {return "Hello";}

myFunction().then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);</script>

</body>
</html>

หรือง่ายกว่านั้น เนื่องจากคุณคาดหวังค่าปกติ (การตอบสนองปกติ ไม่ใช่ข้อผิดพลาด):

ตัวอย่าง

async function myFunction() {
  return "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);}
);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

async function myFunction() {return "Hello";}

myFunction().then(
  function(value) {myDisplayer(value);}
);
</script>

</body>
</html>

รอไวยากรณ์

คีย์เวิร์ด await สามารถใช้ได้ภายในเท่านั้น ฟังก์ชัน async

คำหลัก await ทำให้ฟังก์ชันหยุดการดำเนินการชั่วคราว และรอคำสัญญาที่ได้รับการแก้ไขก่อนที่จะดำเนินต่อไป:

let value = await promise;

ตัวอย่าง

ไปช้าๆและเรียนรู้วิธีการใช้งาน

ไวยากรณ์พื้นฐาน

async function myDisplay() {
  let myPromise = new Promise(function(resolve,  reject) {
    resolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

 myDisplay();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<h1 id="demo"></h1>

<script>
async function myDisplay() {
  let myPromise = new Promise(function(resolve, reject) {
    resolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();
</script>

</body>
</html>

อาร์กิวเมนต์ทั้งสอง (แก้ไขและปฏิเสธ) ถูกกำหนดไว้ล่วงหน้าโดย JavaScript

เราจะไม่สร้างมันขึ้นมา แต่จะเรียกอันใดอันหนึ่งเมื่อฟังก์ชันตัวดำเนินการพร้อม

บ่อยครั้งเราไม่จำเป็นต้องมีฟังก์ชันปฏิเสธ

ตัวอย่างที่ไม่มีการปฏิเสธ

async function myDisplay() {
  let myPromise = new Promise(function(resolve) {
    resolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

 myDisplay();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<h1 id="demo"></h1>

<script>
async function myDisplay() {
  let myPromise = new Promise(function(resolve) {
    resolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();
</script>

</body>
</html>

กำลังรอการหมดเวลา

async function myDisplay() {
  let myPromise = new Promise(function(resolve) {
    setTimeout(function() {resolve("I love You !!");}, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

 myDisplay();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
async function myDisplay() {
  let myPromise = new Promise(function(resolve) {
    setTimeout(function() {resolve("I love You !!");}, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();
</script>

</body>
</html>

กำลังรอไฟล์

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();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<p id="demo"></p>

<script>
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();
</script>

</body>
</html>

รองรับเบราว์เซอร์

ECMAScript 2017 เปิดตัวคำหลัก JavaScript async และ รอ

ตารางต่อไปนี้กำหนดเบราว์เซอร์เวอร์ชันแรกที่รองรับทั้งสองเวอร์ชันอย่างสมบูรณ์:


Chrome 55	Edge 15	Firefox 52	Safari 11	Opera 42
Dec, 2016	Apr, 2017	Mar, 2017	Sep, 2017	Dec, 2016