การเขียน JavaScript เรียก API
บทความนี้สอนเขียน JavaScript เรียก API โดยสอนทั้งหมด 4 แบบ คือ การใช้ XMLHttpRequest, การใช้ fetch, การใช้ Axios และสุดท้ายการใช้ jQuery โดยแต่ละแบบจะมีขั้นตอนที่แตกต่างออกไป แนะนำให้เลือกใช้ตามความเหมาะสมของการพัฒนา จากตัวอย่างโค้ดให้เปลี่ยน API_URL เป็น URL ที่ให้บริการ API ที่ใช้งานจริง โดยมีรายละเอียดดังนี้
1. การใช้ XMLHttpRequest
XMLHttpRequest เป็นวิธีการเรียกใช้ API ที่เก่าแก่ที่สุด เปรียบเสมือนเป็นคำสั่งต้นแบบที่นำไปปรับปรุงเป็นคำสั่งใหม่ๆ ทุกวันนี้ โดยคำสั่งนี้ยังรองรับการทำงานบนทุกโปรแกรมเล่นอินเทอร์เน็ต
<script>
const xhttpr = new XMLHttpRequest();
xhttpr.open('GET', 'API_URL', true);
xhttpr.send();
xhttpr.onload = () => {
if (xhttpr.status === 200) {
const res = JSON.parse(xhttpr.response);
console.log( res );
} else {
// Handle error
}
};
</script>
2. การใช้ fetch
fetch เป็นคำสั่งที่ปรับปรุงมาจาก XMLHttpRequest รองรับการเขียนแบบ promise และจัดการ error จากตัวอย่างใช้คำสั่ง fetch เพื่อเรียกใช้ API ที่ต้องการ หากคุณเขียน JavaScript และต้องการเรียกใช้ API คำสั่ง fetch ถือเป็นตัวเลือกที่ดี
<script>
fetch('API_URL')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log('Error:', error));
</script>
3. การใช้ Axios
Axios เป็น Library ของภาษา JavaScript ที่ใช้สำหรับการส่ง HTTP request ไปยังผู้ให้บริการ หรือ Server โดยตัว Axios รองรับการเขียนแบบ promise และจัดการ error ได้เป็นอย่างดี จากตัวอย่างใช้คำสั่ง axios.get เพื่อเรียกใช้ API ที่ต้องการ กรณีเขียน JavaScript ปกติไม่ได้ใช้ Framework แนะนำให้ติดตั้ง Axios ผ่าน CDN ก่อน
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.1/axios.min.js" type="text/javascript"></script><script>
axios.get('API_URL')
.then(res => {
console.log(res.data);
})
.catch(error => {
console.error('Error:', error);
});
</script>
4. การใช้ jQuery
jQuery เป็น Library ของภาษา JavaScript ที่มีความสามารถที่หลากหลาย ในตัวอย่างเราใช้คำสั่ง ajax สำหรับเรียกใช้ API ที่ต้องการ ซึ่งมีความง่าย และมีประสิทธิภาพอย่างมาก ก่อนเขียนโค้ดต้องติดตั้ง jQuery ก่อนแนะนำแบบ CDN
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script><script>
$.ajax({
url: 'API_URL',
type: 'GET',
success: function(res) {
console.log(res);
},
error: function(error) {
console.error('Error:', error);
}
});
</script>
