JavaScript Academy · บทเรียน

การส่งคำขอ GET

ดึงข้อมูลและแยกวิเคราะห์การตอบกลับ JSON

บทเรียน 1 จาก 413 ขั้นตอน

การส่งคำขอ GET เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

การทำงานของการดึงข้อมูล

API สำหรับส่งคำขอ ช่วยให้เบราว์เซอร์ส่งคำขอ HTTP และส่งคืนค่าเป็น Promise โดยเป็นสิ่งทดแทนสมัยใหม่ของ XMLHttpRequest แบบเก่า

GET พื้นฐาน

เรียกใช้ fetch(url) พร้อม URL โดยค่าเริ่มต้นจะใช้เมธอด GET และส่งคืนค่าเป็นออบเจ็กต์ Response

fetch("https://api.example.com/users")
  .then((response) => {
    console.log(response.status); // 200
  });

ออบเจ็กต์การตอบกลับ

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

fetch(url).then((response) => {
  console.log(response.ok);     // true if status 200-299
  console.log(response.status); // 200
});

การแยกวิเคราะห์ JSON

API ส่วนใหญ่ส่งคืนข้อมูล JSON ให้เรียกใช้ response.json() ซึ่งตัวมันเองจะส่งคืนค่าเป็น Promise ที่ให้ผลลัพธ์เป็นออบเจ็กต์ที่แยกวิเคราะห์แล้ว

fetch(url)
  .then((response) => response.json())
  .then((data) => {
    console.log(data); // parsed JS object/array
  });

เหตุใดจึงมี Promise สองตัว

Promise แรกจะเสร็จสมบูรณ์เมื่อได้รับส่วนหัว ส่วนตัวที่สอง (.json()) จะเสร็จสมบูรณ์เมื่อดาวน์โหลดและแยกวิเคราะห์เนื้อหาทั้งหมดแล้ว นี่จึงเป็นเหตุผลที่ต้องเรียก .then() ต่อกันสองครั้ง

การใช้การทำงานแบบไม่พร้อมกันและการรอผลลัพธ์

โค้ดส่วนใหญ่ใช้ async/await เพื่อให้อ่านง่าย แต่ละ await จะหยุดรอจนกว่า Promise ของมันจะเสร็จสมบูรณ์

async function getUsers() {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

ตัวอ่านเนื้อหาแบบอื่น

นอกจาก json() แล้ว การตอบกลับยังสามารถอ่านเป็น text(), blob() (ข้อมูลไบนารี), arrayBuffer() หรือ formData() ได้ ให้เลือกตามชนิดข้อมูลที่เซิร์ฟเวอร์ส่งกลับมา

const response = await fetch(url);
const html = await response.text(); // raw string

เนื้อหาอ่านได้เพียงครั้งเดียว

เนื้อหาของการตอบกลับเป็นสตรีมที่ใช้ได้เพียงครั้งเดียว การเรียก json() แล้วตามด้วย text() บนการตอบกลับเดียวกันจะทำให้เกิดข้อผิดพลาด ให้โคลนด้วย response.clone() หากจำเป็นต้องใช้ทั้งสองแบบจริง ๆ

พารามิเตอร์คำค้นหา

สร้างสตริงคำค้นหาอย่างปลอดภัยด้วย URLSearchParams แทนการต่อสตริงด้วยตนเอง เพราะ API นี้จะเข้ารหัสอักขระพิเศษให้คุณ

const params = new URLSearchParams({ page: 2, q: "hello world" });
fetch("https://api.example.com/search?" + params);

การส่งส่วนหัว

ส่งอาร์กิวเมนต์ตัวที่สองซึ่งมีตัวเลือกต่าง ๆ สำหรับ GET คุณมักจะกำหนดส่วนหัว Accept หรือโทเค็นยืนยันตัวตน

fetch(url, {
  headers: {
    "Accept": "application/json",
    "Authorization": "Bearer " + token
  }
});

การส่งคืน Promise

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

function loadUser(id) {
  return fetch("/api/users/" + id).then((r) => r.json());
}

ตรวจสอบความเข้าใจ

คำขอ GET ด้วย fetch

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน

fetch(url) ส่งคืน Promise สำหรับ Response อ่านเนื้อหาด้วย json(), text() หรือ blob() ได้เพียงครั้งเดียว ใช้ async/await เพื่อให้โค้ดชัดเจน ใช้ URLSearchParams สำหรับสตริงคำค้นหา และใช้ออบเจ็กต์ตัวเลือกสำหรับส่วนหัว ห่อหุ้มโค้ดไว้ในฟังก์ชันที่ส่งคืน Promise เพื่อให้นำกลับมาใช้ซ้ำได้

เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 59
บทเรียน: 200

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การส่งคำขอ GET” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การส่งคำขอ GET” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การส่งคำขอ GET”

ดึงข้อมูลและแยกวิเคราะห์การตอบกลับ JSON คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การส่งคำขอ GET” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy