บทเรียน
ก่อนจะมาพูดถึงเรื่อง fetch กันอยากให้ทุกๆคนมารู้จัก http request ก่อน
รูปภาพจากเว็บ unifiedinfotech.net เป็นภาพรวมการทำงานของเว็บไซต์
จากรูป web application Architecture นั้นจะเห็นได้ว่าการทำงานหลักๆของเว็บจะถูกแบ่งออกเป็น 2 ส่วนคือ หน้าเว็บไซต์ และ ส่วนของการจัดการฐานข้อมูล แน่นอนว่าการที่ 2 ส่วนนี้จะทำงานร่วมกันต้องมีการติดต่อสื่อสารกันและกัน เส้นทางที่ 2 ส่วนนี้ติดต่อกันเรียกว่า http request โดยที่ส่วนของ เว็บไซต์ จะทำการร้องขอข้อมูล (request) และ ส่วนของการจัดการฐานข้อมูลจะเป็นส่วนที่ทำการส่งข้อมูลกลับ (response)
พอเรารู้จัก http request แล้วว่ามันคืออะไร ต่อมาก็คือแล้วมันติดต่อกันด้วยคำสั่งอะไรได้บ้าง ซึ่งคำสั่งต่างๆเหล่านี้เราจะเรียกกันว่า Method นั้นเอง
Method
- GET
- POST
- PUT
- HEAD
- DELETE
- PATCH
- OPTIONS
โดยผมอาจจะไม่ได้อธิบาย method ทั้งหมดแต่จะขออธิบายแค่ตัวหลักๆ ซึ่งก็คือ
GET, POST, PUT, DELETE
GET คือ ร้องขอข้อมูลจาก เซิฟเวอร์
POST คือ ร้องขอเพิ่มข้อมูลไปที่เซิฟเวอร์เพื่อเพิ่มฐานข้อมูล
PUT คือ ร้องขอแก้ไขข้อมูลไปที่เซิฟเวอร์เพื่อแก้ไขฐานข้อมูล
DELETE คือ ร้องขอการลบข้อมูลไปที่เซิฟเวอร์เพื่อลบฐานข้อมูล
โดย method เหล่านี้นั้นก็เพียงพอต่อการร้องรับ CRUD (create read update delete) ซึ่งเป็นฟังก์ชั่นพื้นฐานในการแก้ไขฐานข้อมูล
หลังจากที่เรารู้เส้นทาง และ Method แล้วต่อมาผมจะขอพูดถึงตัวที่ทำการส่ง request และ ตัวที่รับ Request
โดยตัวที่ทำการส่ง request ก็มีหลายตัว เช่น fetch, axios และ request
ส่วนตัวที่ทำการรับ request ก็มีหลายตัว เช่น node, mongo, .net, php, python, .etc
คราวนี้ก็พอทราบกันแล้วว่า fetch ที่พูดถึงในหัวข้อของบทความนี้ก็คือ ตัวที่จัดการส่ง http request หรือ จะเรียกอีกอย่างว่า API provider นั้นเอง
มาดูวิธีการใช้ fetch กันว่า เราจะใช้ fetch ได้อย่างไร
ก่อนอื่นเราต้องรู้จัก Fetch ก่อนว่ามันคืออะไรโดยตัว syntax ของ fetch แล้วก็คือฟังก์ชัน promise ดังนั้น fetch จะสามารถใช้ .then() และ .catch() ได้
let promise = fetch(url, [options])
url– เป็น url ที่อยู่ของเว็บไซต์options– เป็น พารามิเตอร์ที่ทำการปรับแต่งค่า method, headers etc. ได้
สำหรับคนที่สงสัยอาจจะลองหาความรู้ Javascript ในหัวข้อ callback function, promise function , asynchronous function เพื่อความเข้าใจมากขึ้น
แต่ผมจะขออธิบายคราวๆ ดังนี้ว่า .then () จะทำงานเมื่อ fetch รับ response มาจะฝั่งเซิฟเวอร์แล้ว ซึ่งภายใน .then() จะเป็นฟังก์ชันที่รับค่า response มาเป็น parameter ตัวแรกนั้นเอง ส่วน .catch() จะรับค่า error ในกรณีที่การส่ง http request ไม่สำเร็จ ซึ่งภายใน .catch() จะเป็นฟังก์ชันที่รับค่า error มาเป็น parameter ตัวแรก
ตัวอย่างเช่น
fetch(“url”, option).then(function(response){
ทำอะไรบางอย่างนี้
}).catch(function(error){
ทำอะไรบางอย่างในนี้
})
มาดูวิธีการใช้ method GET
วิธีที่ 1 ใช้ async , await วิธีการ error handling จะใช้ try {}catch (err) {}
let url = ‘url ของ เซิฟเวอร์ที่ต้องการจะดึงข้อมูลมา’;
let response = await fetch(url); // รับค่า response มาเก็บไว้ในตัวแปร
let commits = await response.json(); // เปลี่ยนค่า response เป็น json
alert(commits[0].author.login); // แสดงผลข้อมูลโดยใช้ alert
วิธีที่ 2 วิธีการ error handling จะใช้ .then() และ .catch (err) {}
fetch(‘url ของ เซิฟเวอร์ที่ต้องการจะดึงข้อมูลมา’) // รับค่า response มาเก็บไว้ในตัวแปร
.then(response => response.json()) // เปลี่ยนค่า response เป็น json
.then(commits => alert(commits[0].author.login)); //แสดงผลข้อมูลโดยใช้ alert
ก่อนจะพูดถึง post, put, delete จะขอพูดถึงส่วนของ request header ก่อนนะครับเพราะว่าส่วนนี้เป็นส่วนสำคัญเลยสำหรับการ post, put , delete
โดย request header นั้นจะเป็นข้อมูลที่สำคัญๆทั้งหมดไว้ซึ่งจะแบ่งออกเป็นกลุ่มๆ ดังนี้
โดยสามารถเข้าไปอ่านรายละเอียดได้ ในลิ้งค์นี้
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers
โดยตัวหลักๆที่เราจะต้องทำการปรับแต่งคือ
method : ว่าจะเป็น get, put, post หรือ delete
Authentication : ส่งsecret หรือ token
body : ส่งข้อมูลไปให้เซิฟเวอร์
mode : เป็น cors , no-cors, same-origin
context-type : เป็น url-encode , json, text, .etc
เมื่อเราพอเข้าใจ request header แล้วจะเห็นว่า การ Get นั้นเราอาจจะไม่ต้องส่งข้อมูลอะไรไปให้ เซิฟเวอร์เลยไม่ได้กำหนดค่าอะไรมากยกเว้น Authentication, mode ที่อาจจะมีการกำหนด แต่ว่า Method post, put, post จะต้องส่งค่าข้อมูล เลยอาจจะมีรายละเอียดที่ต้องใส่เพิ่มเข้าไปเยอะหน่อย
มาต่อที่ POST กันต่อ
let user = { name: ‘John’, surname: ‘Smith’ }; //ข้อมูลที่จะส่งไปเป็นข้อมูลประเภท object
let response = await fetch(‘กำหนด url’,
{ method: ‘POST’, // กำหนดMethod
headers: { ‘Content-Type’: ‘application/json;charset=utf-8’ },
body: JSON.stringify(user) // เปลี่ยน object เป็น JSON
});
let result = await response.json(); //รับค่า response มาเปลี่ยนเป็น JSON
alert(result.message); // แสดงผลข้อมูล
ต่อมาเป็น method PUT ซึ่งจะคล้ายกับ POST
let user = { name: ‘Hello’, surname: ‘World’ }; //ข้อมูลที่จะส่งไปเป็นข้อมูลประเภท object
let response = await fetch(‘กำหนด url + id’,
{ method: ‘PUT’, // กำหนดMethod
headers: { ‘Content-Type’: ‘application/json;charset=utf-8’ },
body: JSON.stringify(user) // เปลี่ยน object เป็น JSON
});
let result = await response.json(); //รับค่า response มาเปลี่ยนเป็น JSON
alert(result.message); // แสดงผลข้อมูล
จะเห็นได้ว่าเขียนแทบจะเหมือนกันเลยแค่เปลี่ยนจาก POST เป็น PUT เท่านั้นเอง แต่ PUT จะใช้ในกรณีที่จะแก้ไขค่าเดิม ซึ่งจะต้องส่ง id หรืออะไรบางอย่างเพื่อระบุตำแหน่งที่ต้องการจะแก้ไขในฐานข้อมูล
สุดท้ายแล้ว DELETE
fetch(‘url’ + id, {
method: ‘DELETE’,
}) // ส่งค่า id ผ่าน url และ กำหนด method
.then(res => res.text()) // รับค่า response แล้วเปลี่ยนมาเป็น text
.then(res => console.log(res)) // แสดงผลข้อมูลผ่าน console.log
หวังว่าผู้อ่านจะพอเห็นภาพการใช้งาน fetch ที่ API provider และกระบวนการโดยรวมมากขึ้นโดยตัวอย่างที่ยกมานั้นเป็นเพียงรูปแบบพื้นฐานอย่างง่ายๆในการส่ง http request ไปให้เซิฟเวอร์เท่านั้น รายละเอียดอื่นๆผมได้แนบแนวทางการศึกษาเพิ่มเติมไว้ในบทความแล้วหากมีข้อสงสัยสามารถหาข้อมูลเพิ่มเติมเพื่อให้เข้าใจมากขึ้นครับ
ที่มา