Vue.js และการทำ Request Cancellation กับ axios ปัจจุบันการส่ง XMLHttpRequest ไปยัง Backend API นั้นเป็นเรื่องพื้นฐานที่มีการใช้งานกันแทบทุกเว็บแอพ แต่ด้วยธรรมชาติของ Asynchronous ใน JavaScript นั้นทำให้การแสดงผลลัพธ์ของ Response อาจไม่เป็นไปตามลับดับในการส่ง Request เสมอไป แล้วถ้าการแสดงผลลัพธ์ของ Response ไม่ได้เป็นไปตามลำดับที่ควรจะเป็นหล่ะ จะเกิดปัญหาอย่างไร

ใช้งาน Firebase Realtime Database ร่วมกับ Vue.js แบบไม่ต้องง้อ vuefire ในการเขียนโปรแกรมด้วย Vue.js เพื่อใช้งาน Firebase Realtime Database นั้น นักพัฒนาอาจจะนิยมใช้ npm Package ที่ชื่อว่า vuefire ซึ่งเป็น Official Package ของ Vue.js ที่ใช้งานง่ายและสะดวก แต่เพื่อการเรียนรู้เราจะมาลอง Integrate Vue.js และ Firebase Realtime Database โดยใช้การสร้าง Subscription ใน Lifecycle Hooks ของ Vue.js โดยไม่ต้องง้อเจ้า vuefire กันนะครับ

ตั้งค่า Vetur และ Visual Studio Code สำหรับการพัฒนา Vue.js ในการใช้ Visual Studio Code พัฒนา Vue.js Application ปกติเราจะติดตั้ง Extension ยอดนิยมชื่อ vetur แต่หลังจากติดตั้ง Extension แล้วการจัดระเบียบโค้ดอาจยังไม่ถูกใจ เราสามารถตั้งค่า Visual Studio Code และ Extension vetur เพิ่มเติมได้ตามตัวอย่างในบทความนี้ครับ