การใช้งาน Fetch http request

ก่อนจะมาพูดถึงเรื่อง fetch กันอยากให้ทุกๆคนมารู้จัก http request ก่อน

Image for post

รูปภาพจากเว็บ 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 ไปให้เซิฟเวอร์เท่านั้น รายละเอียดอื่นๆผมได้แนบแนวทางการศึกษาเพิ่มเติมไว้ในบทความแล้วหากมีข้อสงสัยสามารถหาข้อมูลเพิ่มเติมเพื่อให้เข้าใจมากขึ้นครับ

ที่มา

Using FetchThis kind of functionality was previously achieved using XMLHttpRequest. Fetch provides a better alternative that can…developer.mozilla.org

https://javascript.info/fetch

11Shares

Write a comment