async / await คืออะไรนะ (เวอร์ชั่นมือใหม่หัด โค้ดดดดดดดด)

สวัสดีครับหลังจากไม่ได้เขียนบล็อกมานาน วันนี้ได้ฤกษ์กลับมาเขียนซะที ฮ่า ๆ

พอดีว่าวันนี้ได้มีโอกาสนั่งดูน้อง ๆ เขียนโค้ดกันอย่างสนุกสนาน (เก่งกว่าเราทั้งนั้นเลย ฮาา) ก็เหลือบไปเห็นน้อง ๆ เค้าเขียน async /await กัน ไอ่เราก็ เอ๊ะ อะไรวะ มันมีไว้ทำอะไร ตามสไตล์คนไม่รู้ ก็เลยไปถามอาจารย์กู (กูเกิล) พอรู้คร่าว ๆ แล้ว เราก็มาเขียนอธิบายแบบมือใหม่หัดโค้ดเลยละกันน (ถ้าผิดพลาดตรงไหน หรือ มีข้อเสนอแนะใด ๆ เพิ่มเติม บอกหน่อยนะครัชชชชชช)

ก่อนอื่นต้องอธิบายก่อนว่า ปกติเวลาเขียน javascript เจ้า javascript เนี่ย มันจะทำงานไปเรื่อย ๆ โดยที่ไม่รอให้ฟังก์ชันก่อนหน้านั้นทำงานเสร็จก่อน เช่น

ผลลัพท์ที่ได้จะเป็น

จะสังเกตว่า ผ่านไป 4 วิจ้า แสดงผลก่อน ผ่านไป 3 วิจ้า เนื่องจาก ผ่านไป 3 วิจ้า เรา setTimeout ให้มันหลังผ่านไป 3 วินาที ค่อยแสดงผลใช่ไหมครับบบบ หมายความว่ามันโค้ดมันเข้าใจละว่า อ่อออออออ ฟังก์ชันนี้ไม่มีปัญหาแต่อีก 3 วิ ค่อย กลับมาทำใน ฟังก์ชันนะะะะะ ผ่ามมมมมมมมมมมม ทีนี้แหละ ถ้ามันเกิดขึ้นตอนที่เรา เรียกใช้ API อะไรสักอย่าง แล้วหลังจากนั้นจำเป็นต้องเอาข้อมูลจาก API เพื่อมาทำ function ต่อไป แต่ทีนี้ถ้าหาก API ตัวนี้โหลดช้าละ 3 วิ 10 วิ หรือ error ละ function ต่อไปก็ทำงานไปแล้วโดยที่ข้อมูลยังจาก API ยังโหลดไม่เสร็จใช่ไหมละครับ ทีนี้ วิธีการแก้ปัญหา ที่ทำก็คือใส่ Promise ให้มัน พอเสร็จ ก็ค่อย .then() ทำ waitFourSecond ต่อ แบบนี้

เราลองดู บรรทัดล่างนะครับ waitForThreeSecond().then(function(){ waitForFourSecond })

บรรทัดนี้ยังพอดูง่ายนะครับ เพราะเราทำแค่ 2 ฟังก์ชัน อิอิ แต่ถ้าเราจำเป็นต้องทำฟังก์ชันต่อกันหลาย ๆ ฟังก์ชันละ เช่น

ทำไมมันยาวจัง ทำไมมันยาวอย่างนี้ เกิดอาการอ่านยากขึ้นมาทันที ฮ่า ๆ ทีนี้มันเลยเกิดพระเอกสุดเทพที่จะทำให้โค้ดของเราอ่านง่ายขึ้นมาทันตาเห็นนน (มั้งครับ 555)

Async /Await จึงได้ถือกำเนิดขึ้น ท่าด่ามมมมมมมมม

เพียงแค่คุณใส่ Async เข้าไปหน้า function แล้ว ด้านในฟังชั่นนั้น หากคุณจะให้มันรอทำให้เสร็จก่อนก็จงใส่ Await ด้านหน้าฟังชั่นที่ต้องการให้รอซะะะะะะ จะเป็นแบบนี้

สวยงามขึ้นมาทันตาเห็น อ่านง๊ายง่าย ทีนี้มันก็จะรอ โค้ดทีละแถว ๆ ทำงานเสร็จ แล้วจึงทำงานบรรทัดถัดไปจ๊ะ

หมดปัญหาโค้ดอ่านยาก ด้วย Async Await ใครใช้ then ซ้อน ๆ ๆ ๆ ๆ ก็ลองเปลี่ยนมาเป็นแบบนี้ดูก็ได้นะครับ อ่านง่ายดีเหมือนกัน หรือถ้าชอบแบบเดิมก็ไม่ว่ากันครับ อยากให้ลองกันดูครับ สำหรับใครที่หัดใหม่นะครับ ลองฝึกไปเรื่อย ๆ ครับ ดั่งคำพังเพยที่กล่าวเอาไว้ว่า

จะเขียนโค้ดที่ดีได้ ต้องเขียนให้เป็นก่อน

ถ้าผิดพลาดประการใดก็ขออภัยด้วยครับ เนื่องจากยังเป็นผู้เริ่มต้นอยู่เหมือนกัน ขอบคุณคร้าบบบบบบ