vue 5

เริ่มต้นทํา Service API ไว้ใช้งาน

เราได้ใช้ vue-resource ดึงข้อมูลจาก server ของเราได้แล้ว

แต่การใช้งานจริงที่เรากําลังจะทํานั้น

เราจะใช้ package ที่ชื่อ axios มาใช้งาน

เพราะจะทําให้เขียน code โปรแกรมในส่วนนี้น้อยลงมากช่วยลดความ ผิดพลาดได้เยอะทําการ down client ของเราลงก่อนครับ

ทําการติดตั้ง axios package ด้วยคําสั่ง

npm install --save axios

สร้างโฟล์เดอร์ชื่อว่า services ไว้ใน src ของเราจากทําการสร้างไฟล์

src/services/Api.js

ทําการเปิดไฟล์ Api.js

จาก code จะเป็นการเรียก axios เพื่อใช้งานและ export เพื่อให้ไฟล์โปรแกรมอื่น

Using Axios to Consume APIs — Vue.js

สามารถเรียกใช้งานด้วย เช่นกัน โดยเรากําหนด baseURL เป็น URL หลังของ server ของเรา คือ

http://localhost:8081

ทําการสร้างไฟล์

src/services/UsersService.js

จากนั้นทําการใส่ code

ทําการ import Api.js เพื่อใช้งานผ่าน Api()

ซึ่งการใช้งาน ลักษณะนี้ จะทําการใช้งาน HTTP Method (get, post, put, delete) ได้ง่าย

ทําฟังกชั่นต่าง ๆ แล้วทําการ export เพื่อให้ไฟล์โปรแกรมอื่นๆของเรา

สามารถเรียกใช้งานฟังกชั่นต่าง ๆ ได้นั่นเอง เช่นเมื่อเรียกผ่าน function index ของแล้วก็จะทําการ return ค่าที่ได้จาก server ตาม url ที่ส่งไปนั่นเอง

ทําการเรียกใช้งาน Service ผ่าน Vue Component

เปิด src/components/Users/Index.vue

ในส่วนของ client ของเราขึ้น มาแล้วทําการแก้ไข code เป็นดังนี้

เมื่อ log data จากการเรียก url http://localhost:8080/#/users

ผ่าน Web Brower ของผมจะสังเกตุได้ว่า มีการดึงข้อมูล json ออกมาได้แล้วนั่นเอง

ผลการดึงข้อมูลจาก server ผ่าน service

มีจุดที่น่าสนใจคือ await และ async คือ

เนื่องจากการเขียนโปรแกรมด้วย JavaScript จะเป็นแบบ async

ตามที่เคยกล่าวมาแต่การอ่านข้อมูลจาก server นั้น ใช้เวลาในการอ่านหรือเขียนทําให้โปรแกรมของเราต้องหยุดรอเพื่อให้ได้ข้อมูลครบเสียก่อนจึง ไปทํางานส่วนอื่นนั่นเอง

จําไว้ ว่า await ว่าไว้หน้า statement หรือคําสั่งที่รอ

วน async วางไว้หน้า function ครับ

async created () {

ตอนนี้รู้ว่าเมื่อ Vue Component ของเราถูกเรียกใช้งานมันจะทํางานที่ function created ก่อนเสมอ

ค่อยไปอธิบายเรื่อง Lifecycle อีกครั้ง

vue 6