ดึง JavaScript:คำแนะนำ

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

การดึงข้อมูล API ช่วยให้คุณสามารถส่งคำขอ Ajax ใน JavaScript แบบเก่าธรรมดาได้ เป็นเครื่องมือที่มีประโยชน์สำหรับการดึงข้อมูลและทำการเปลี่ยนแปลงข้อมูลบนเว็บเซิร์ฟเวอร์

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

Fetch API คืออะไร

JavaScript สามารถส่งคำขอเครือข่ายมาเป็นเวลานานแล้ว เครื่องมือ XMLHTTPRequest จัดเตรียมทรัพยากรที่คุณต้องการเพื่อดึงข้อมูลจากเซิร์ฟเวอร์และอัปเดตข้อมูลจากเซิร์ฟเวอร์

แม้ว่าเครื่องมือนี้จะมีประสิทธิภาพ แต่ก็ค่อนข้างละเอียดและซับซ้อนในการใช้งาน ในทางกลับกัน การดึงข้อมูลเป็นทางเลือกใหม่ที่ทำให้การขอเว็บทำได้ง่ายขึ้น

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

วิธีสร้างคำขอ GET โดยใช้การดึงข้อมูล

วิธีที่ดีที่สุดในการแสดงให้เห็นว่าการดึงข้อมูลทำงานอย่างไรโดยใช้ตัวอย่าง สำหรับบทช่วยสอนนี้ เราจะใช้บริการเว็บ JSONPlaceholder นี่คือ API ที่มาพร้อมกับข้อมูลจำลองที่เขียนไว้ล่วงหน้า ซึ่งเราสามารถใช้เพื่อทดสอบคำขอทางเว็บของเรา

รหัสต่อไปนี้สร้างคำขอ GET เพื่อดึงโพสต์แรกจาก JSONPlaceholder:

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

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

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(json => console.log(json))

รหัสนี้ส่งคืน:

{ body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto", id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", userId: 1 }

มาทำลายรหัสของเรากัน ในบรรทัดแรก เราใช้ fetch() วิธีการเริ่มต้นคำขอเว็บไปยัง JSONPlaceholder API เราก็ได้ใช้ .then() วิธีการบอกรหัสของเราว่าต้องทำอย่างไรหลังจากส่งคำขอทางเว็บของเราแล้ว

ใน .then() . แรกของเรา วิธี เราแปลงการตอบสนองที่ส่งคืนโดย API เป็น JSON ทำให้ข้อมูลของเราอ่านง่ายขึ้น เราใช้ .then() . อื่น วิธีการบันทึกการตอบสนองต่อคอนโซล นี่แสดงให้เราเห็นโพสต์ที่มี ID 1 จาก JSONPlaceholder API

วิธีการส่งคำขอ POST

GET ไม่ใช่ประเภทคำขอเดียวที่คุณสามารถสร้างได้ด้วยการดึงข้อมูล API นอกจากนี้ยังมีฟังก์ชันที่รองรับคำขอ POST, PUT และ DELETE ไวยากรณ์สำหรับสิ่งเหล่านี้เหมือนกัน ดังนั้นเราจะยกตัวอย่างหนึ่งตัวอย่าง:วิธีสร้างคำขอ POST

เมื่อคุณส่งคำขอ POST, PUT หรือ DELETE โดยปกติแล้ว คุณจะต้องระบุข้อมูลสามส่วน:

• URL ที่คุณส่งคำขอ
• วิธีที่คุณใช้ในการส่งคำขอ (ในกรณีนี้คือ POST)
• ข้อมูลที่คุณต้องการส่งไปยังเซิร์ฟเวอร์

นี่คือข้อมูลโค้ดที่จะสร้างความคิดเห็นใหม่โดยใช้ JSONPlaceholder API:

const data = {
	name: "Leslie Tudor",
	email: "[email protected]",
	body: "This is an example post by Career Karma!",
	postId: 1
}

const options = {
	method: "POST",
	body: JSON.stringify(data),
	headers: {
		"Content-Type": "application/json"
	}
};

fetch('https://jsonplaceholder.typicode.com/comments', options)
  .then(response => response.json())
  .then(json => console.log(json))

รหัสของเราส่งคืนโพสต์ที่สร้างขึ้นใหม่ในรูปแบบ JSON:

{ body: "This is an example post by Career Karma!", email: "[email protected]", id: 501, name: "Leslie Tudor", postId: 1 }

ในโค้ดของเรา ขั้นแรกเราจะประกาศ data object เก็บข้อมูลที่เราต้องการส่งไปยังเซิร์ฟเวอร์ ในกรณีนี้ เรากำลังส่งข้อมูลเกี่ยวกับความคิดเห็นของผู้ใช้ชื่อ Leslie Tudor

จากนั้นเราจะประกาศอ็อบเจ็กต์อื่นที่เก็บตัวเลือกที่เกี่ยวข้องกับคำขอดึงข้อมูลของเรา ออบเจ็กต์นี้ระบุวิธีที่เราใช้เพื่อสร้างคำขอของเรา (POST) ข้อมูลที่เราต้องการส่ง เช่นเดียวกับส่วนหัวที่เราต้องการส่ง

สุดท้าย เราใช้ fetch() วิธีการส่งคำขอของเราจริงๆ เช่นเดียวกับในตัวอย่างแรก เราใช้ .then() วิธีการดึงการตอบสนอง แปลงเป็น JSON จากนั้นพิมพ์ไปยังคอนโซล

วิธีจัดการกับข้อผิดพลาดโดยใช้ JavaScript Fetch

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

มีวิธีที่เรียกว่า .catch() ซึ่งคุณสามารถใช้ตรวจจับข้อผิดพลาดที่โค้ดของคุณส่งคืนได้ รวมกับ Promise.reject() คุณสามารถใช้เพื่อจัดการกับข้อผิดพลาด:

fetch('https://jsonplaceholder.typicode.com/comments/999, options)
  .then(response => {
	if (response.ok) {
		console.log(response.json());
		return response.json();
	} else {
		return Promise.reject({ statusText: response.statusText })
	}
})
.catch(error => console.log("ERROR:", error.statusText));

รหัสนี้ส่งคืน:

"ERROR:", "Not Found"

ในโค้ดของเรา เราใช้เมธอด response.ok เพื่อตรวจสอบว่าคำขอของเราสำเร็จหรือไม่ ในตัวอย่างนี้ เราได้พยายามเรียกความคิดเห็นที่ไม่มีอยู่จริง ความคิดเห็น #999 ซึ่งทำให้เนื้อหาของ else . ของเรา คำสั่งที่จะดำเนินการซึ่งส่งคืนสัญญาที่ถูกปฏิเสธ คำสัญญานี้มีข้อความแสดงข้อผิดพลาดที่ส่งคืนโดย JSONPlaceholder API

จากนั้นเราก็ใช้ .catch() คำสั่งเพื่อรับข้อผิดพลาดนี้และพิมพ์ไปที่คอนโซล

บทสรุป

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

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