คำสั่ง async/await ในภาษา JavaScript

Posted by Mathiphic on April 24,2023

ภาษา JavaScript มีการทำงานแบบ Asynchronous คือเวลาที่เราสั่งงานอะไรไป ถ้าเป็นงานที่ใช้เวลานาน ก็จะทำคำสั่งถัดไปเลยโดยไม่รอให้คำสั่งก่อนหน้าทำเสร็จ ซึ่งก่อให้เกิดปัญหาในหลายกรณี

เช่น ฟังก์ชั่น A ต้องการข้อมูลจาก ฟังก์ชั่น B แต่ ฟังก์ชั่น A ทำงานเสร็จก่อน ฟังก์ชั่น B ทำให้เกิด Error ขึ้น

ปัญหานี้ เราสามารถแก้ไขได้ด้วย Callback function,  Promise และ Async/Await โดยในบทความนี้เราจะแก้ปัญหา โดยใช้ Async/Await นะครับ เนื่องจากสะดวกและรวดเร็วในการเขียนโปรแกรม 

ตัวอย่าง

function first() {
     setTimeout(() => {
         console.log("function: 1");
     }, 1000);
}

function second() {
         console.log("function: 2");
}

function third() {
     setTimeout(() => {
         console.log("function: 3");
     }, 500);
}

สร้าง 3 Function ขึ้นมา เพื่อทดสอบการทำงานและความแตกต่างของของฟังชั่นในรูปแบบปรกติ และแบบ Async/Await

ขั้นตอนต่อไปทำการเรียกใช้งาน Function แบบปรกติ โดยเขียน Code ดังนี้

first();
second();
third();

// Output
//  function: 2
//  function: 3
//  function: 1

จะเห็นได้ว่า เมื่อเราเรียกใช้งาน Function แบบปรกติ ผลลัพธ์ที่ได้ คือจะทำงาน Function ถัดไปทันที่
โดยที่ไม่รอให้ Function ก่อนหน้าทำงานเสร็จก่อน โดยสังเกตได้จาก Outpot ที่แสดงผลออกมา

ทำการเรียกใช้งาน Function แบบ Async/Await โดยเขียน Code ดังนี้

async function main() {
     await first();
     await second();
     await third();
}

main();
// Output
//  function: 1
//  function: 2
//  function: 3

จะเห็นได้ว่า เมื่อเราเรียกใช้งาน Function แบบ Async/Await ผลลัพธ์ที่ได้ จะมีการรอให้ Function 
ที่ถูกเรียกใช้งาน ทำเสร็จก่อน ค่อยทำงาน Function ถัดไป

การที่เราเลือกใช้ Async/Await นั้น จะเป็นการทำให้ให้ภาษา JavaScript มีการทำงานแบบ Synchronous ส่งผลให้ภาษา JavaScript มีความยืดหยุ่น เหมาะสำหรับงานที่ต้องอาศัยการทำงานแบบเป็นลำดับขั้นตอน เพราะฉะนั้น เรา

แนะนำ

บทความใหม่

คำสั่ง async/await ในภาษา JavaScript

ภาษา JavaScript มีการทำงานแบบ Asynchronous คือเวลาที่เราสั่งงานอะไรไป ถ้าเป็นงานที่ใช้เวลานาน ก็จะทำคำสั่งถัดไปเลยโดยไม่รอให้คำสั่งก่อนหน้าทำเสร็จ ซึ่งก่อให้เกิดปัญหาในหลายกรณี

Posted by Mathiphic on April 24,2023

การทำ Authentication ใน Lumen + JWT

PHP Framework ที่ถูกพัฒนามาจาก Laravel โดยทำให้ Laravel Framework นั้นมีขนาดเล็กลงโดยการตัด Package บางตัวที่เกินความจำเป็นออก

Posted by Mathiphic on April 24,2023

การใช้งาน SweetAlert2 เบื้องต้น

 Library ตัวหนึ่งสำหรับการสร้างหน้าต่างแจ้งเตือน บนเว็บไซต์ของเราได้อย่างง่ายดาย สวยงาม และปรับแต่งได้ รวมไปถึง Responsive และ UX/UI อีกด้วย 

Posted by Mathiphic on April 24,2023