ตอนสร้าง web application อาจมีเวลาที่อยากทำ HTTP request เข้าถึง external resource ตัวอย่าง สมมติคุณทำบล็อก อาจอยากเรียก API ดึงลิสต์ comments แสดงบนแต่ละ blog post
Axios เป็น popular JavaScript library สำหรับทำ web requests ในคู่มือนี้ เราจะอธิบายวิธีใช้ axios ทำ GET request พร้อมตัวอย่างแสดงการทำงานของ axios
ทำไมต้อง Axios?
Axios เป็น promise-based library ทำให้ทำ web requests ง่าย
คุณอาจสงสัย: ทำไมต้อง axios ไม่ใช่ libraries อื่นๆ ที่ทำ GET requests ได้? จริงๆ มี libraries อื่นๆ เช่น fetch แต่ axios มีข้อดีที่ libraries อื่นไม่มี
Axios รองรับ older browsers ทำให้สร้าง accessible user experience ได้มากขึ้น Axios มี built-in CSRF protection ป้องกัน vulnerabilities ทำงานใน Node.js เหมาะสำหรับพัฒนา front-end และ back-end web applications
วิธีติดตั้ง Axios
ก่อนทำ GET request ด้วย axios ต้องติดตั้ง library ก่อน ทำได้ด้วยคำสั่ง:
npm install axios --save
คำสั่งนี้ติดตั้ง axios และ save ไว้ใน local package.json file ตอนนี้พร้อมใช้ axios library แล้ว
วิธีทำ Request ด้วย Axios
เริ่มต้น axios ง่าย มาก ทำ web request แค่ระบุ URL ที่ต้องการ request data และ method ที่ต้องการใช้
สมมติอยากดึงลิสต์ random facts เกี่ยวแมวจาก cat-facts API ทำได้ด้วยโค้ดนี้:
axios ({ url: "https://cat-fact.herokuapp.com/facts", method: "GET" )}
โค้ดคืนค่า promise แทน request ที่ยังไม่เสร็จ เพื่อดึงข้อมูลจาก HTTP request ใช้ async/await function แบบนี้:
const axios = require("axios"); async function getCatFacts() { const response = await axios ({ url: "https://cat-fact.herokuapp.com/facts", method: "GET" }) console.log(response.data) } getCatFacts()
Server ตอบกลับด้วยลิสต์ข้อเท็จจริงแมว
ตอนเรียกฟังก์ชันนี้ HTTP GET request ส่งไป cat-facts API เราใช้ async/await function เพื่อโปรแกรมไม่ดำเนินการต่อจนกว่า web request จะเสร็จ เพราะ axios คืนค่า promise ก่อน คืนค่าข้อมูลจาก request หลัง request เสร็จ
Axios library มาพร้อม shorthand commands สำหรับทำ web requests:
- axios.get()
- axios.post()
- axios.delete()
- axios.put()
- axios.patch()
- axios.options()
ในบทช่วยสอนนี้ เราจะเน้น axios.get() และ axios.post() methods ที่ใช้ syntax พื้นฐานเหมือน shorthand methods อื่นๆ
ทำ GET Requests ด้วย axios
ในตัวอย่างก่อน เราใช้ axios ทำ GET request แต่มีวิธีง่ายกว่า: ใช้ axios.get()
สมมติอยากดึงลิสต์ข้อเท็จจริงแมว แล้วนับว่ามีกี่อันที่คืนมา ทำได้ด้วยโค้ดนี้:
const axios = require("axios"); async function getCatFacts() { const response = await axios.get("https://cat-fact.herokuapp.com/facts") console.log(`{response.data.all.length} cat facts were returned.`) } getCatFacts()
โค้ดสร้าง response: 225 cat facts were returned.
แยกวิเคราะห์โค้ด เราประกาศ async function getCatFacts() ทำ web request
เราใช้ axios.get() ดึงลิสต์ข้อเท็จจริงแมวจาก cat-facts API "response.data" เก็บ response objects และ request body จาก request ของเรา
สุดท้าย ใช้ .length attribute คำนวณจำนวนข้อเท็จจริงแมวที่คืนมาจาก request ใส่ตัวเลขนี้ใน string "cat facts were returned"
ส่ง Headers ด้วย axios
ตอนทำ GET request อาจต้องส่ง custom header ไปยัง web resource ที่ request สมมติดึงข้อมูลจาก API ที่ต้องการ authentication อาจต้องระบุ authentication header
เพื่อระบุ header กับ axios request ใช้โค้ดนี้:
axios.get("https://urlhere.com", { headers: { "header-name": "header-value" } })
โค้ดนี้ส่ง header "header-name" ค่า "header-value" ไปยัง URL ที่ระบุ
ส่ง Parameters ด้วย axios
APIs หลายตัวอนุญาตส่ง parameters ใน GET request ตัวอย่าง API อาจอนุญาต limit จำนวน responses ที่คืนด้วย limit parameter
ระบุ parameter ส่งกับ web request ง่ายกับ axios สามารถ include parameter เป็น query string หรือใช้ params property ตัวอย่าง axios ทำ web request ด้วย query strings ระบุ parameter:
axios;get("https://urlhere.com/?date=2020-05-15")
หรือระบุ params property ใน axios options ด้วยโค้ดนี้:
axios;get("https://urlhere.com/?date=2020-05-15", { params: { date: "2020-05-15" } })
ทั้งสองตัวอย่างส่ง parameter ชื่อ "date" ค่า "2020-05-15" ไปยัง URL ที่ระบุ
วิธีทำ POST Request ด้วย axios
Syntax ทำ POST request เหมือน GET request ต่างตรงที่ควรใช้ axios.post() method แทน axios.get()
สมมติอยากทำ post request ไป API ทำได้ด้วยโค้ดนี้:
axios.post("https://urlhere.com")
คุณระบุ headers และ parameters ได้เหมือน GET request สมมติอยากส่ง header "Name" ค่า "James" กับ POST request ทำได้ด้วยโค้ดนี้:
axios.post("https://urlhere.com", { headers: { "Name": "James" } })
สรุป
Axios library ใช้ทำ web requests ใน JavaScript ใช้ได้ทั้ง front-end ด้วย JavaScript และ back-end ด้วย platform เหมือน Node.js ต่างจาก web request libraries อื่นๆ axios มี built-in CSRF protection รองรับ older browsers และใช้ promise structure เหมาะสำหรับทำ web requests
ตอนนี้คุณพร้อมทำ GET และ POST requests ด้วย axios แบบ professional web developer แล้ว
