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

JavaScript Mar 12, 2023

ตัว fetch() เป็น method ที่ให้เราสามารถ รับ-ส่ง ข้อมูล (HTTP Request) ระหว่างเว็บได้จากเว็บบราวเซอร์ ตัว Fetch API จะ return ค่า Promise กลับมา โดยตัวอย่างนี้ จะเป็นตัวอย่าง การดึงข้อมูลด้วย fetch() นะครับ

รูปแบบ syntax ของ Fetch API จะเป็นแบบนี้

fetch(url)
  .then(res => res.json())
  .then(json => console.log(json)
  .catch(error => console.log(error) // handle the error

หรือแบบ async/await ก็จะเป็นแบบตัวอย่างด้านล่าง

const res = await fetch(url)
const json = await res.json()
console.log(json)

fetch() ไม่รองรับ Internet Explorer 11 หรือก่อนหน้า แต่ถ้าเป็น Browser ใหม่ๆ สามารถใช้งานได้

ค่าที่ fetch() ส่งกลับมา เป็น object Response จะมีค่าข้างในหลักๆ คือ

ok - เป็นค่า true หรือ false
status - ค่า HTTP status code ที่ได้ (ปกติ จะเป็น 200)
statusText - ค่า default

ตัวอย่างการดึงข้อมูล

// 1. ดึงข้อมูลด้วย fetch
const res = await fetch('https://api.github.com/users/github')

// 2. หากอยากเช็ค status ก่อนก็สามารถทำได้เช่น ถ้าไม่ใช่ HTTP 200 OK ให้ error
if (res.status !== 200) {
  alert('Something went wrong')
  return
}

// 3. แปลงเป็น json
const jsonData = await res.json()

ลองไปประยุกต์ใช้กันดูนะครับ ลองฝึกเขียนได้ผ่าน browser ได้เลย โดยการเปิด Developer Tools (ใช้ Chrome เข้า More Tools -> Developer Tools) ถ้าใช้ Windows กด F12 หรือ Control + Shift + I ถ้า Mac OS ใช้ Command + Option + I ครับ แล้วไปที่แท็บ console ทดลองเรียก api ด้วย fetch ได้เลย

หรือตัวอย่าง Codepen ที่ผมทำไว้ เป็นหน้า HTML ธรรมดา ใส่ Input และกด Search ก็จะไปดึงข้อมูลจาก Github API มาแสดง

ตัวอย่าง Free API ไปลองใช้งานดูได้ครับ