ตัวอย่างการใช้งาน Async/Await (ES2017)
วันนี้จะมาสรุปเกี่ยวกับเรื่อง async/await กันสักนิด หลังจากได้ลองทำ workshop สอนน้องๆในทีมไป
โดยที่ async/await นั้น เป็น syntax ที่จะทำให้การเขียน asynchronous ที่เมื่อก่อนเต็มไปด้วย callback หายไปและสามารถใช้งานร่วมกับ promise ได้ โดยจะมีการเขียนคล้ายๆกับแบบ synchronous ปกติเลย มาลองทำความรู้จักกันนะ
Async/await 101
- เป็นวิธีใหม่สำหรับการเขียน asynchronous โดยที่เมื่อก่อน ถ้าเราจะเขียนโค็ดเราให้เป็น asynchronous ต้องเลือกใช้ callback หรือ promise เท่านั้น
- จริงๆ เจ้า async/await แล้วมันไม่ได้มาแทน promise ซะทีเดียว แต่มันทำงานร่วมกันได้ แต่ async/await ไม่สามารถใช้งานร่วมกับ callback ได้
- มีลักษณะเหมือนกับ promise, non blocking
- ทำให้การเขียน asynchronous ของเราดูเหมือนการเขียนแบบ synchronous ทำให้สามารถเข้าใจได้ง่าย
โค๊ดตัวอย่างการใช้งานในรูปแบบต่างๆ
Convert promise to async/await
ลองแปลงเป็นแบบ async/await
Handle Errors
โดยการ Error handler เราจะใช้ try..catch เข้ามาช่วย
Await Multiple Promises Concurrently with Promise.all
ลองแปลงโค๊ดโดยนำ promise.all มาใช้งานแทน
Conclusion
Async/await เป็นหนึ่งในฟิเจอร์ที่น่าสนใจ โดยจะทำให้โค๊ดที่เกี่ยวกับการใช้งาน asynchronous ดูเข้าใจง่ายและสะอาดมากขึ้น
** ปัจจุบันถ้าเราต้องการใช้งาน async/await โดยไม่ต้อง compile ใดๆ ต้องใช้ nodejs version 7.6 ขึ้นไปนะครับ
** ส่วนของฝั่งfrontend ส่วนใหญ่จะมีการแปลงด้วย webpack ก่อนนำไปใช้งานอยู่ ทำให้สามารถใช้งานได้เลย https://babeljs.io/docs/usage/polyfill/
Source Code: https://github.com/gokusenz/workshop-async-await-es7
คิดและเขียนคือสิ่งที่ผมชอบ ได้ทดลองทำอะไรใหม่ๆ เพื่อนำมาประยุกต์และต่อยอดในเรื่องต่างๆ พร้อมถ่ายทอดเรื่องราวจากชีวิตจริง จากประสบการณ์ จากแนวคิดของผม :)
