Fetch API | Office.in.th

Fetch API: ดึงข้อมูลจากโลกภายนอกด้วย JavaScript

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับ Web Workers ซึ่งช่วยให้เราสามารถประมวลผลข้อมูลใน background ได้โดยไม่กระทบต่อ User Interface (UI) ของเว็บไซต์ ในบทนี้ เราจะมาเรียนรู้เกี่ยวกับเครื่องมืออีกชิ้นหนึ่งที่สำคัญไม่แพ้กัน นั่นคือ Fetch API ซึ่งเป็นวิธีที่ทันสมัยและยืดหยุ่นในการทำการ HTTP requests จาก JavaScript เพื่อดึงข้อมูลจาก Server หรือ API อื่นๆ

ทำไมต้อง Fetch API?

ก่อนที่จะมี Fetch API, JavaScript มักจะใช้ XMLHttpRequest (XHR) ในการทำ HTTP requests แม้ว่า XHR จะทำงานได้ดี แต่โค้ดที่เขียนด้วย XHR มักจะยาวและซับซ้อนกว่า Fetch API มาก Fetch API ถูกออกแบบมาให้ใช้งานง่ายกว่า, มีโครงสร้างที่ชัดเจนกว่า, และใช้ Promises ในการจัดการ asynchronous operations ทำให้โค้ดดูสะอาดและอ่านง่ายขึ้น

เริ่มต้นใช้งาน fetch()

ฟังก์ชันหลักของ Fetch API คือ fetch() ซึ่งรับ URL เป็น argument และ return Promise ที่ resolve เป็น Response object ลองดูตัวอย่างง่ายๆ:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response);
  });

โค้ดนี้จะทำการ GET request ไปยัง https://jsonplaceholder.typicode.com/todos/1 และเมื่อ request สำเร็จ, Promise จะ resolve ด้วย Response object ซึ่งประกอบด้วยข้อมูลเกี่ยวกับ response เช่น status code, headers, และ body แต่สิ่งที่สำคัญคือ Response object นี้ *ยังไม่ได้* contain ข้อมูลที่เราต้องการจริงๆ เราต้องใช้ methods ต่างๆ เพื่อ extract ข้อมูลออกมา

การจัดการ Response

Response object มี methods หลายอย่างที่เราสามารถใช้เพื่อ extract ข้อมูลออกมา ขึ้นอยู่กับ format ของข้อมูลที่เราคาดหวังว่าจะได้รับ:

response.json(): ใช้สำหรับข้อมูลที่อยู่ใน format JSON
response.text(): ใช้สำหรับข้อมูลที่เป็น text
response.blob(): ใช้สำหรับข้อมูลที่เป็น binary (เช่น รูปภาพ)
response.formData(): ใช้สำหรับข้อมูลที่อยู่ใน format FormData (มักใช้ในการส่ง form data)

ลองมาดูตัวอย่างการใช้ response.json() เพื่อดึงข้อมูล JSON:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => {
    console.log(data); // แสดงข้อมูล JSON
  });

ในตัวอย่างนี้, เรา chain .then() สองครั้ง ครั้งแรกใช้เพื่อ convert Response object เป็น JSON, และครั้งที่สองใช้เพื่อจัดการกับข้อมูล JSON ที่ได้

การตรวจสอบ Status Code

ก่อนที่จะ extract ข้อมูล, เราควรตรวจสอบ status code เพื่อให้แน่ใจว่า request สำเร็จ Status code ที่บ่งบอกว่า request สำเร็จมักจะอยู่ในช่วง 200-299 ถ้า status code อยู่นอกช่วงนี้ แสดงว่าเกิดข้อผิดพลาดขึ้น

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.status);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

ในตัวอย่างนี้, เราตรวจสอบ response.ok ซึ่งเป็น boolean ที่บ่งบอกว่า status code อยู่ในช่วง 200-299 หรือไม่ ถ้าไม่ใช่, เรา throw Error ซึ่งจะถูก catch โดย .catch() block

การส่ง Request Headers

เราสามารถส่ง request headers ไปพร้อมกับ request ได้ โดยการส่ง object ที่มี property headers เป็น argument ที่สองของ fetch():

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  })
})
.then(response => response.json())
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('Error:', error);
});

ในตัวอย่างนี้, เราส่ง Content-Type header เพื่อบอก server ว่าเรากำลังส่งข้อมูล JSON และ Authorization header เพื่อ authentication (เช่น การใช้ Bearer token)

การส่ง Method ต่างๆ (POST, PUT, DELETE)

โดย default, fetch() จะทำการ GET request แต่เราสามารถเปลี่ยน method ได้ โดยการกำหนด property method ใน argument ที่สองของ fetch():

POST: ใช้ในการสร้าง resource ใหม่
PUT: ใช้ในการอัปเดต resource ทั้งหมด
PATCH: ใช้ในการอัปเดต resource บางส่วน
DELETE: ใช้ในการลบ resource

ตัวอย่างการทำ POST request:

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

ในตัวอย่างนี้, เราส่งข้อมูล JSON ใน body ของ request และกำหนด Content-Type header เพื่อบอก server ว่าเรากำลังส่งข้อมูล JSON

กรณีใช้งานจริง

1. การดึงข้อมูลจาก API สาธารณะ:

// ดึงข้อมูลสภาพอากาศจาก OpenWeatherMap API
const apiKey = 'YOUR_API_KEY'; // แทนที่ด้วย API key ของคุณ
const city = 'London';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(`Weather in ${city}: ${data.weather[0].description}`);
  })
  .catch(error => {
    console.error('Error fetching weather data:', error);
  });

2. การส่งข้อมูล form ไปยัง server:

const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // ป้องกันการ submit แบบ default

  const formData = new FormData(form);

  fetch('/submit-form', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
});

ข้อผิดพลาดที่พบบ่อย

CORS (Cross-Origin Resource Sharing) error: เกิดขึ้นเมื่อคุณพยายามที่จะทำการ request ไปยัง domain ที่แตกต่างจาก domain ของเว็บไซต์ของคุณ Browser จะบล็อก request นี้เพื่อความปลอดภัย วิธีแก้คือ server ที่คุณกำลัง request ต้องตั้งค่า CORS headers อย่างถูกต้อง
Promise rejection: เกิดขึ้นเมื่อมีข้อผิดพลาดในการ request เช่น network error หรือ server error ควรใช้ .catch() block เพื่อจัดการกับ rejection นี้
Incorrect data format: ตรวจสอบให้แน่ใจว่าคุณใช้ method ที่ถูกต้องในการ extract ข้อมูลจาก Response object (เช่น response.json() สำหรับ JSON, response.text() สำหรับ text)

สรุป

Fetch API เป็นเครื่องมือที่ทรงพลังและใช้งานง่ายสำหรับการทำ HTTP requests จาก JavaScript มันช่วยให้เราสามารถดึงข้อมูลจาก Server หรือ API อื่นๆ ได้อย่างมีประสิทธิภาพและยืดหยุ่น ในบทนี้ เราได้เรียนรู้พื้นฐานของการใช้งาน Fetch API, การจัดการ response, การส่ง request headers, และการจัดการข้อผิดพลาดที่พบบ่อย

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการใช้งาน FormData ซึ่งเป็น object ที่ใช้ในการส่ง form data ไปยัง server ได้อย่างง่ายดาย