home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

วิธีสร้างคำขอ axios GET และ POST

เมื่อคุณสร้างเว็บแอปพลิเคชัน อาจมีบางครั้งที่คุณต้องการดำเนินการคำขอ HTTP เพื่อเข้าถึงทรัพยากรภายนอก ตัวอย่างเช่น สมมติว่าคุณกำลังสร้างบล็อก คุณอาจต้องการเรียก API เพื่อเรียกรายการความคิดเห็นที่จะแสดงในบล็อกแต่ละโพสต์

Axios เป็นไลบรารี JavaScript ยอดนิยมที่คุณสามารถใช้ส่งคำขอเว็บได้ ในคู่มือนี้ เราจะอธิบายวิธีใช้ axios เพื่อส่งคำขอ GET เราจะอธิบายตัวอย่างบางส่วนเพื่อแสดงให้เห็นว่า axios ทำงานอย่างไร และคุณจะนำไปใช้ในโค้ดได้อย่างไร

ทำไมต้อง Axios

Axios เป็นห้องสมุดตามสัญญาที่ทำให้ง่ายต่อการร้องขอเว็บ

คุณอาจสงสัยว่า:เหตุใดฉันจึงควรใช้ axios กับไลบรารีคำขอเว็บอื่น ๆ ที่มีอยู่มากมาย เป็นความจริงที่มีไลบรารีอื่นๆ เช่น การดึงข้อมูลที่คุณสามารถใช้เพื่อส่งคำขอ GET ได้ แต่ axios มีข้อดีหลายประการที่ไลบรารีเหล่านี้ไม่มี

Axios รองรับเบราว์เซอร์รุ่นเก่า ซึ่งจะทำให้คุณสามารถสร้างประสบการณ์ผู้ใช้ที่เข้าถึงได้มากขึ้น Axios ยังมาพร้อมกับการป้องกัน CSRF ในตัวเพื่อป้องกันช่องโหว่ นอกจากนี้ยังใช้งานได้ใน Node.js ซึ่งจะทำให้ดีหากคุณพัฒนาทั้งเว็บแอปพลิเคชันส่วนหน้าหรือส่วนหลัง

วิธีการติดตั้ง Axios

ก่อนที่คุณจะส่งคำขอ GET โดยใช้ axios คุณจะต้องติดตั้งไลบรารีก่อน คุณสามารถทำได้โดยใช้คำสั่งต่อไปนี้:

npm install axios --save

คำสั่งนี้จะติดตั้ง axios และบันทึกลงในไฟล์ package.json ในเครื่องของคุณ ตอนนี้คุณก็พร้อมที่จะเริ่มใช้ไลบรารี axios แล้ว

วิธีการส่งคำขอโดยใช้ Axios

การเริ่มต้นใช้งาน axios เป็นเรื่องง่าย ในการส่งคำขอทางเว็บ สิ่งที่คุณต้องทำคือระบุ URL ที่คุณต้องการขอข้อมูลและวิธีการที่คุณต้องการใช้

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

สมมติว่าคุณต้องการดึงรายการข้อเท็จจริงแบบสุ่มเกี่ยวกับแมวจาก cat-facts API เราสามารถทำได้โดยใช้รหัสนี้:

axios ({
	url: "https://cat-fact.herokuapp.com/facts",
	method: "GET"
)}

รหัสนี้ส่งคืนคำสัญญาซึ่งแสดงถึงคำขอที่ยังไม่เสร็จสมบูรณ์ ในการดึงข้อมูลจากคำขอ HTTP นี้ คุณจะต้องใช้ฟังก์ชัน async/await ดังนี้:

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()

เซิร์ฟเวอร์ตอบกลับด้วยรายการข้อเท็จจริงเกี่ยวกับแมว

เมื่อเราเรียกใช้ฟังก์ชันนี้ คำขอ HTTP GET จะถูกส่งไปยัง cat-facts API เราใช้ฟังก์ชัน async/await ดังนั้นโปรแกรมของเราจะไม่ดำเนินต่อไปจนกว่าคำขอทางเว็บจะเสร็จสมบูรณ์ นี่เป็นเพราะว่า axios ให้คำมั่นสัญญาก่อน ส่งคืนข้อมูลจากคำขอที่ทำหลังจากคำขอนั้นเสร็จสิ้น

ไลบรารี axios มาพร้อมกับคำสั่งชวเลขสองสามคำสั่งที่คุณสามารถใช้เพื่อขอเว็บ:

  • axios.get()
  • axios.post()
  • axios.delete()
  • axios.put()
  • axios.patch()
  • axios.options()

ในบทช่วยสอนนี้ เราจะเน้นที่ axios.get() และ axios.post() เมธอด ซึ่งใช้ไวยากรณ์พื้นฐานเดียวกันกับวิธีชวเลขอื่นๆ ทั้งหมด

การสร้างคำขอ GET โดยใช้ axios

ในตัวอย่างที่แล้ว เราใช้ axios เพื่อส่งคำขอ GET แต่มีวิธีที่ง่ายกว่าในการส่งคำขอ GET ด้วย axios:การใช้ 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()

รหัสสร้างการตอบสนองนี้:225 cat facts ถูกส่งกลับ

มาทำลายรหัสของเรากัน ก่อนอื่นเราได้ประกาศฟังก์ชัน async ชื่อ getCatFacts() ที่เราทำการขอเว็บ

จากนั้นเราใช้ axios.get() เพื่อดึงรายการข้อเท็จจริง cat จาก cat-facts API; “response.data” ถือวัตถุการตอบสนองและร่างกายร้องขอจากคำขอของเรา

สุดท้าย เราใช้แอตทริบิวต์ .length เพื่อคำนวณจำนวนข้อเท็จจริงเกี่ยวกับแมวที่ได้รับจากคำขอของเรา จากนั้นเราเพิ่มตัวเลขนี้ลงในสตริง “cat facts are return”

การส่งส่วนหัวโดยใช้ axios

เมื่อคุณส่งคำขอ GET คุณอาจต้องส่งส่วนหัวที่กำหนดเองไปยังทรัพยากรบนเว็บที่คุณส่งคำขอ สมมติว่าคุณกำลังดึงข้อมูลจาก API ที่ต้องมีการตรวจสอบสิทธิ์ คุณอาจต้องระบุส่วนหัวของการตรวจสอบสิทธิ์

ในการระบุส่วนหัวด้วยคำขอ axios คุณสามารถใช้รหัสต่อไปนี้:

axios.get("https://urlhere.com", {
	headers: { "header-name": "header-value" }
})

รหัสนี้จะส่งส่วนหัว "ชื่อส่วนหัว" ที่มีค่า "ส่วนหัว" ไปยัง URL ที่เราระบุไว้

การส่งพารามิเตอร์โดยใช้ axios

API จำนวนมากอนุญาตให้คุณส่งพารามิเตอร์ในคำขอ GET ตัวอย่างเช่น API อาจอนุญาตให้คุณจำกัดจำนวนการตอบกลับที่ส่งคืนโดยใช้พารามิเตอร์จำกัด

การระบุพารามิเตอร์ที่จะส่งด้วยคำขอทางเว็บนั้นทำได้ง่ายโดยใช้ axios คุณสามารถรวมพารามิเตอร์เป็นสตริงการสืบค้น หรือใช้คุณสมบัติ params นี่คือตัวอย่างของ axios ที่ส่งคำขอเว็บโดยใช้สตริงการสืบค้นเพื่อระบุพารามิเตอร์:

axios;get("https://urlhere.com/?date=2020-05-15")

หรือคุณสามารถระบุคุณสมบัติ params ในตัวเลือก axios โดยใช้รหัสนี้:

axios;get("https://urlhere.com/?date=2020-05-15", {
params: {
date: "2020-05-15"
}
})

ตัวอย่างทั้งสองนี้ส่งพารามิเตอร์ที่มีชื่อ “date” และค่า “2020-05-15” ไปยัง URL ที่ระบุ

วิธีการส่งคำขอ POST โดยใช้ axios

ไวยากรณ์สำหรับการส่งคำขอ POST เหมือนกับการสร้างคำขอ GET ความแตกต่างคือคุณควรใช้ axios.post() วิธีการแทน axios.get() .

สมมติว่าคุณต้องการส่งคำขอโพสต์ไปยัง API คุณสามารถทำได้โดยใช้รหัสนี้:

axios.post("https://urlhere.com")

คุณสามารถระบุส่วนหัวและพารามิเตอร์ในลักษณะเดียวกับที่คุณทำการร้องขอ GET สมมติว่าคุณต้องการส่งส่วนหัว "ชื่อ" ที่มีค่า "James" พร้อมคำขอ POST ของคุณ คุณสามารถทำได้โดยใช้รหัสนี้:

axios.post("https://urlhere.com", {
	headers: { "Name": "James" }
})

บทสรุป

ไลบรารี axios ใช้สำหรับส่งคำขอเว็บใน JavaScript สามารถใช้กับทั้ง front-end โดยใช้ JavaScript หรือ back-end โดยใช้แพลตฟอร์มเช่น Node.js ไม่เหมือนไลบรารีขอเว็บอื่น ๆ axios มีการป้องกัน CSRF ในตัว รองรับเบราว์เซอร์รุ่นเก่าและใช้โครงสร้างสัญญา เหมาะอย่างยิ่งสำหรับการสร้างคำขอทางเว็บ

ตอนนี้คุณพร้อมที่จะเริ่มส่งคำขอ GET และ POST โดยใช้ axios เหมือนนักพัฒนาเว็บมืออาชีพแล้ว