การใช้งาน Async ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

การเขียนโปรแกรมที่ทันสมัยกับ JavaScript หนึ่งในคุณลักษณะที่สำคัญที่สุดคือการจัดการกับโค้ดที่ทำงานแบบ asynchronous หรือ async เพราะการจัดการ asynchronous operations อย่างมีประสิทธิภาพสามารถช่วยให้แอพพลิเคชันของคุณทำงานได้อย่างราบรื่นและไม่ถูกหน่วงโดยกระบวนการที่ต้องรอนาน ในบทความนี้ ผมจะอธิบายความสำคัญและวิธีการใช้งาน async ใน JavaScript ผ่าน 3 ตัวอย่างโค้ดที่สามารถนำไปใช้ได้จริง พร้อมกับยกตัวอย่างการใช้งานในชีวิตประจำวัน และหากคุณพร้อมที่จะพัฒนาทักษะการเขียนโปรแกรม async ที่ลึกซึ้งยิ่งขึ้น ไม่เพียงแต่เอกสารอ้างอิงเท่านั้น แต่การมาเรียนรู้กับทีมงานของเราที่ EPT (Expert-Programming-Tutor) จะทำให้คุณเข้าใจถึงศาสตร์แห่งการเขียนโค้ดอย่างแท้จริง

ความหมายและความสำคัญของ Async

Async ใน JavaScript เป็นวิธีการที่ช่วยให้คุณสามารถทำงานกับโค้ดที่ต้องรอการตอบสนอง เช่นการเรียกข้อมูลจากฐานข้อมูลหรือ API โดยไม่ต้องหยุดทำงานที่เหลืออยู่ในโปรแกรม หากไม่มี async โปรแกรมทั้งหลายก็จะต้องรอจนกว่ากระบวนการที่ต้องใช้เวลานานจะเสร็จสิ้น นั่นส่งผลให้ผู้ใช้สัมผัสถึงความช้าและหน่วง

ตัวอย่าง CODE โดยใช้ Async

ตัวอย่างที่ 1: `setTimeout` ฟังก์ชันง่ายๆ ที่จะให้คุณเห็นว่า async ทำงานอย่างไร

 console.log('สวัสดี!');

setTimeout(function() {
  console.log('นี่คือข้อความที่แสดงหลังจากเวลาผ่านไป 2 วินาที');
}, 2000);

console.log('การทำงานของโค้ดยังคงดำเนินต่อ...');

คำอธิบาย: เมื่อเรียกใช้โค้ดนี้ ข้อความ 'สวัสดี!' และ 'การทำงานของโค้ดยังคงดำเนินต่อ...' จะถูกพิมพ์ทันที ตามด้วยข้อความที่ภายใน `setTimeout` หลังจากผ่านไป 2 วินาที

ตัวอย่างที่ 2: การใช้งาน `Promise` เพื่อจัดการ async operations

 function ดึงข้อมูลจากAPI(url) {
  return new Promise((resolve, reject) => {
    // จำลองการเรียกข้อมูลจาก API
    setTimeout(() => {
      const ข้อมูลที่จะFake = { ชื่อผลิตภัณฑ์: 'โทรศัพท์มือถือ' };
      resolve(ข้อมูลที่จะFake);
      // ในโลกการเขียนจริงควรมีการเช็คสถานะและ reject ด้วยหากมีข้อผิดพลาด
    }, 1500);
  });
}

ดึงข้อมูลจากAPI('https://example.com/api/product')
  .then(ข้อมูล => {
    console.log('ผลิตภัณฑ์:', ข้อมูล.ชื่อผลิตภัณฑ์);
  })
  .catch(ข้อผิดพลาด => {
    console.error('เกิดข้อผิดพลาด', ข้อผิดพลาด);
  });

คำอธิบาย: โค้ดนี้แสดงการใช้ `Promise` เพื่อจำลองการเรียกข้อมูลจาก API และการจัดการข้อมูลที่ได้รับหรือข้อผิดพลาดด้วยการใช้ `.then()` และ `.catch()`.

ตัวอย่างที่ 3: `async/await` ทำให้โค้ดง่ายขึ้น

 async function แสดงข้อมูลผลิตภัณฑ์() {
  try {
    const ข้อมูลจากAPI = await ดึงข้อมูลจากAPI('https://example.com/api/product');
    console.log('ผลิตภัณฑ์:', ข้อมูลจากAPI.ชื่อผลิตภัณฑ์);
  } catch (ข้อผิดพลาด) {
    console.error('เกิดข้อผิดพลาด', ข้อผิดพลาด);
  }
}

แสดงข้อมูลผลิตภัณฑ์();

คำอธิบาย: ที่นี่เราใช้ `async` กับ `await` ซึ่งทำให้โค้ดดูเหมือน synchronous code แต่จริงๆ แล้วมันทำงานแบบ async โดย `await` จะรอให้ `Promise` ที่คืนมาจาก `ดึงข้อมูลจากAPI` ถูก resolve ก่อนที่จะดำเนินการถัดไป

Usecase ในโลกจริง

หนึ่งในตัวอย่าง usecase ที่เห็นได้ชัดเจนที่สุดคือเวลาที่เราเข้าเว็บไซต์ที่มีการโหลดข้อมูลจำนวนมาก เช่น เว็บไซต์ข่าวหรือแพลตฟอร์ม e-commerce เมื่อเราเข้าไปในเว็บไซต์ เราอาจจะเห็นข้อมูลบางส่วนเริ่มปรากฏขึ้นก่อน เช่น ข้อมูลที่ไม่ต้องการการโหลดจากเซิร์ฟเวอร์ เช่น โครงสร้างเว็บหรือข้อมูลที่ถูกเก็บไว้ใน cache ของเว็บเบราว์เซอร์ ขณะที่ข้อมูลที่ต้องการการประมวลผลหรือโหลดจากเซิร์ฟเวอร์ เช่น รายการสินค้าล่าสุดหรือข่าวที่กำลังเป็นกระแสอาจปรากฏขึ้นในภายหลัง ด้วยการใช้ async operations เว็บไซต์เหล่านี้จึงไม่จำเป็นต้องรอให้ข้อมูลทั้งหมดถูกโหลดเสร็จสิ้นก่อนที่ผู้ใช้จะเริ่มต้นใช้งานฟังก์ชันอื่นๆ ในขณะที่การโหลดข้อมูลยังคงดำเนินต่อไป

การเรียนรู้การใช้ async ใน JavaScript ไม่เพียงจะทำให้คุณสามารถสร้างโปรแกรมที่ทำงานได้ราบรื่นและมีประสิทธิภาพ แต่ยังช่วยให้คุณเข้าใจการทำงานของโปรแกรมในมุมมองที่ลึกซึ้งยิ่งขึ้น ถ้าคุณต้องการพัฒนาทักษะการเขียนโค้ดให้ก้าวไปอีกขั้น และอยากทำความเข้าใจกับหลักการทำงานที่หลากหลายยิ่งขึ้น การเข้ามาเรียนรู้พร้อมกับผู้เชี่ยวชาญที่ EPT (Expert-Programming-Tutor) จะช่วยเปิดโลกของการเขียนโค้ดให้กับคุณได้อย่างไม่มีขีดจำกัด

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง