หนังสือ
JavaScript
บทที่ 11. HTML และเว็บ
ส่งคำขอ HTTP

JavaScript:
ส่งคำขอ HTTP

วิธีการ:

JavaScript ใช้ API fetch ในการส่งคำขอ นี่คือวิธีการทำคำขอ GET ง่ายๆ:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.error('Error:', err));

ผลลัพธ์จะเป็นข้อมูล JSON จาก URL ง่ายไหมล่ะ?

และสำหรับคำขอ POST:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.error('Error:', err));

นี่คือการส่งข้อมูลใหม่และแสดงผลตอบกลับจากเซิร์ฟเวอร์

ลงลึก

คำขอ HTTP มีมาตั้งแต่เริ่มต้นของเว็บ—คิดถึงฟอร์ม HTML XMLHttpRequest (XHR) เคยเป็นวิธีหลักในการส่งคำขอใน JavaScript, แต่มันไม่คล่องตัว

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

ทางเลือก? แน่นอน ไลบรารี่เช่น Axios หรือ Ajax ของ jQuery ยังคงถูกใช้งาน พวกเขาเสนอโครงสร้างประโยคและวิธีแก้ปัญหาสำหรับปัญหาเฉพาะ, แต่ fetch เป็นฟังก์ชันดั้งเดิมและโดยทั่วไปเป็นทิศทางที่ควรไป

รายละเอียดในการใช้งาน? จำไว้ว่าต้องจัดการกับข้อบกพร่อง, ทำงานกับประเภทการตอบกลับที่แตกต่างกัน, และตระหนักถึงกฎของการแบ่งปันทรัพยากรข้ามแหล่งที่มา (CORS)

ดูเพิ่มเติมที่

การวิเคราะห์ HTMLการส่งคำขอ HTTP ด้วยการตรวจสอบสิทธิ์พื้นฐาน