วิธีการดึงข้อมูล API ด้วยการใช้ Fetch API

ในปัจจุบันต้องบอกว่าการรับส่งข้อมูลจาก Client ไปยัง Server ผ่าน API ถือเป็นเรื่องพื้นฐานและปกติมาก ที่ทุกคนน่าจะเคยได้ใช้งานมา ถ้าจะให้ย้อนกลับไป ก็ตั้งแต่ที่เราใช้งาน AJAX (ไม่ใช่ทีมฟุตบอลนะ) ผ่าน XMLHttpRequest ถ้าใครเกิดทัน 🤣 หรือแม้แต่ช่วงยุครุ่งเรืองของ jQuery เราจะเห็นโค๊ดแบบด้านล่างนี้เต็มไปหมดเลย

1
$.ajax({
2
  url: 'https://your-api.com/',
3
  context: payload
4
}).done(function (data) {
5
  // console.log(data);
6
})

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

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

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

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

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

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

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

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

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

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

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

10
// 3. แปลงเป็น json
11
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 ไปลองใช้งานดูได้ครับ

• JSON Placeholder

Happy Coding ❤️