JavaScript ดึง API ง่ายๆ ด้วย fetch

บทความนี้สอนเขียนภาษา JavaScript ดึง API แบบง่ายๆ ด้วยคำสั่ง fetch โดยคำสั่งนี้ใช้สำหรับส่งคำขอ (Request) ไปยัง Server และรับข้อมูลตอบกลับ (Response) ของ API คำสั่งนี้รองรับการทำงานแบบ async - await หรือ asynchronous สามารถเขียนโค้ดได้ดังนี้

ตัวอย่าง JavaScript ดึง API

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

ผลลัพธ์

{
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
}

จากตัวอย่างใช้คำสั่ง fetch ดึง API จาก URL ตัวอย่าง โดยเขียนโค้ดแบบ Promise chaining มีการใช้ then 2 ครั้ง สำหรับ then ครั้งแรกเพื่อแปลง Response Object เป็น JSON Object ส่วน then ครั้งที่สองคือแสดง JSON ออกสู่หน้า console หากเกิดข้อผิดพลาดเกิดขึ้นโปรแกรมจะทำงานใน catch แทน และแสดงสาเหตุ Error ออกสู่หน้า console