Async/Await กับ Promise
การเขียน Promise เพื่อใช้งาน asynchronous ต่างๆแทน callback function เป็นการเข้ามาแก้ปัญหา callback hell ที่เกิดขึ้นได้อย่างสวยงามระดับนึงครับ แต่พอเราเริ่มใช้ไปสักพัก ก็จะเกิดปัญหาว่าการทำ chaining ของ Promise ก็ทำให้เราอ่านยาก หรือ handle error ได้ไม่สะดวกนัก ทำให้ใน ECMAScript 2017 มีการกำหนดสิ่งที่เรียกว่า Async/Await เพื่อมาทำให้เราใช้งาน Promise ได้สะดวกยิ่งขึ้นครับ
จากตัวอย่างโค้ดด้านบน เมื่อ someNetworkTask1() และ someNetworkTask2() เป็น function ที่ return Promise
เราทำ someNetworkTask1() แล้วเอาผลลัพธ์มาใช้ใน someNetworkTask2() ก่อนจะนำผลลัพธ์ไปใช้ใน finishingOperation()
แต่พอเราลองใช้ Async/Await แล้ว ทำให้โค้ดของเราอ่านง่ายขึ้น และเข้าใจง่ายเยอะเลย โดยเฉพาะคนที่เริ่มศึกษา JavaScript เนอะ
แต่ไม่ใช่ว่า Async/Await จะมาแทนที่ Promise นะ เพราะการทำงานของมันก็คือ Promise นั้นแหละ ของที่ตามหลัง await ก็ต้องเป็น Promise ส่วน function ที่มี Await อยู่ ก็ต้องใส่ keyword async ด้านหน้า เพื่อบอกว่า function นี้จะ return Promise ออกไปครับ
แล้วถ้าจะเขียน Async/Await แต่มีบางงานเป็น Concurrent หล่ะ?
ถ้าใน Promise เราคงจะเขียนโดยใช้ Promise.all() มาช่วยแบบนี้:
someNetworkTask3() กับ someNetworkTask4() ทำงาน asynchronous โดยไม่สัมพันธ์กัน เมื่อทำเสร็จทั้งสอง function ด้านบนแล้ว จึงจะเรียก anotherFinishingOperation() เพื่อนำผลลัพธ์ทั้งสองไปทำงานต่อครับ
พอเราลองเปลี่ยนโค้ดด้านบนให้เป็น Async/Await เราก็ต้องใช้ Promise.all() เข้ามาช่วยเช่นกันครับ โดยโค้ดจะหน้าตาแบบนี้:
เนื่องจาก Promise.all() ก็ return Promise ออกมาเหมือนกัน ทำให้เราสามารถใช้ await ด้านหน้าเพื่อรอผลลัพธ์ทั้งสองเสร็จก่อน แล้วจึงนำมาใช้ต่อได้ครับ
หวังว่าทุกๆท่านที่อ่านบทความนี้จะเข้าใจการใช้งาน Async/Await มากขึ้น และนำไปประยุกต์กับรูปแบบอื่นๆได้ อย่าลืมว่า Async/Await เกิดมาเพื่อใช้งานกับ Promise นะครับ 😊
ผิดพลาดประการใด แจ้งได้เลยนะครับ
