Async, Promise & AJAX

JavaScript ไม่รอฟังก์ชันบางประเภททำงานเสร็จ — โค้ดบรรทัดถัดไปทำงานต่อทันที ทำให้ลำดับผลลัพธ์ไม่เป็นไปตามที่เขียน

ปัญหาของ asynchronous

setTimeout(function () {
    console.log(1);
}, 5000);
console.log(2);

// ผลลัพธ์: 2 ออกก่อน แล้ว 1 ตามมาอีก 5 วินาที

function taskOne()   { setTimeout(function(){ console.log("this is task 1"); }, 500); }
function taskTwo()   { console.log("this is task 2"); }
function taskThree() { setTimeout(function(){ console.log("this is task 3"); }, 1000); }

taskOne();      // รอ 500ms
taskTwo();      // ไม่รอ
taskThree();    // รอ 1000ms

ฟังก์ชันไหนเป็น asynchronous บ้าง

• ฟังก์ชันจับเวลา — setTimeout, setInterval, delay
• การขอข้อมูลไป server แบบ AJAX — ยิง request แล้วทำโค้ดบรรทัดถัดไปทันที ไม่รอ response
• การอ่าน/เขียนไฟล์ (ฝั่ง NodeJS)

Promise

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("สำเร็จ");     // เรียก resolve เมื่อทำงานเสร็จ
        // reject("ล้มเหลว");   // เรียก reject เมื่อผิดพลาด
    }, 200);
});

myPromise
    .then(result => console.log(result))
    .catch(error => console.error(error));

async / await

ทำให้ฟังก์ชัน asynchronous ทำงานเรียงลำดับได้ตามต้องการ

async function taskOne() {
    return new Promise((resolve) => {
        setTimeout(function () {
            console.log("this is task 1");
            resolve(true);
        }, 3000);
    });
}
async function taskTwo() {
    return new Promise(resolve => {
        setTimeout(function () {
            console.log("this is task 2");
            resolve(true);
        }, 2000);
    });
}

async function test() {
    await taskOne();     // รอให้เสร็จก่อน
    await taskTwo();     // แล้วค่อยทำตัวถัดไป
}
test();

Promise.any (ES10)

const myPromise1 = new Promise((resolve, reject) => {
    setTimeout(() => { resolve("queen"); }, 200);
});
const myPromise2 = new Promise((resolve, reject) => {
    setTimeout(() => { reject(); }, 100);
});

Promise.any([myPromise1, myPromise2]).then((x) => {
    console.log(x);          // "queen" — เอาตัวที่ resolve สำเร็จเร็วที่สุด
});

// ถ้าล้มเหลวทุกตัว
const a = Promise.reject('error A');
const b = Promise.reject('error B');
Promise.any([a, b])
    .then(result => console.log(result))
    .catch(error => console.error('ทุกตัวล้มเหลว:', error));

AJAX คืออะไร

Asynchronous JavaScript and XML = การร้องขอข้อมูลไปยัง server โดยไม่ต้อง refresh หน้าเว็บ

• ยิง request แบบ async → ทำโค้ด JS บรรทัดอื่นต่อได้เลย
• ต้องส่งฟังก์ชันที่จะทำงานตอนได้ response เข้าไปด้วย (callback)
• เปลี่ยนเฉพาะบางส่วนของหน้าเว็บที่ต้องการ

XMLHttpRequest

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    xhttp.open("GET", "ajax_info.txt", true);   // true = asynchronous
    xhttp.send();
}

// ส่งแบบ GET / POST
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

xhttp.open("POST", "demo_post.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");