FETCH คืออิหยัง?

สมัยก่อนการส่งข้อมูล request ผ่าน http เป็นหน้าที่ของ Html แต่เมื่อเราขยับมาอยู่ในยุคของการทำเว็บแบบ 2.0 เราก็เริ่มมีวิธีการส่งข้อมูลหรือรับข้อมูลผ่าน API ซึ่งมีโค้ดทีต้องเขียนเยอะแยะมาก เช่น การสร้าง Objสำหรับเรียก HTTP request การกำหนด Content-type กำหนด event ของ http ที่เราจะเช็ค status และการรับข้อมูลหรือรูปแบบของข้อมมูล ถ้าทันได้เขียน request ยุคนั้นเป็นอะไรที่สูบพลังงานชีวิตเยอะจริง ๆ

ต่อมาก็มาถึงยุค ajax ที่ง่ายกว่ามาก เราสามารถกำหนดรายละเอียดต่างๆ ใน packet โดยอยู่ในรูปของ Obj JavaScript แล้วฟังก์ชั่นจะถูกแปลงให้ไปอยู่ในรูปแบบของ XHR ก่อนจะส่งจริง ๆ อีกที ซึ่งก็ค่อนข้างจะใช้งานง่ายแล้ว แต่จะดีกว่าไหม ถ้าตัวภาษามีฟังก์ชั่น built-in มาให้แต่แรก

JavaScript เวอร์ชั่นใหม่จึงสร้าง fetch ขึ้นมาเพื่อใช้แทน ajax เดิม โดยเป็นการนำเอาฟังก์ชั่น ajax เดิมมาสร้างให้เป็น native ของภาษา JavaScript โดยมีวิธีใช้งานง่ายๆ ดังนี้

จะเห็นว่า fetch สามารถใช้งานแทน ajax ได้เลยเพราะเป็น native ของ JavaScript อยู่แล้ว และไม่ได้มีการทำงานที่ต่างจาก ajax ที่ใช้อยู่เลย ส่วนตัวผมเขียนคลาสขึ้นมาครอบ fetch ไว้อีกทีทำให้การใช้งานทำได้ง่ายและสั่งใช้งานแบบตามใจตัวเองขึ้นไปอีก

โดยข้อดีของ Fetch คือ สามารถกำหนด โหมด CORS(Cross-Origin Response) ได้ เช่น จะมี CORS หรือไม่ นอกจากนี้ยังมี method ที่มากกว่า GET กับ POST อีกด้วย ทำให้ fetch เอื้อประโยชน์ต่อการเขียน framework ของ JavaScript อีก อย่างที่บอกว่าในจุดนี้ไม่เพียงมีประโยชน์ต่อการเขียน JavaScript เท่านั้น แต่สามารถปรับใช้งานกับภาษาอื่นๆ ได้อีกเพื่อให้รับรูปโดยตัวของ Application ได้เลยว่า method ไหนให้ทำอะไร เช่น GET สำหรับ เรียกดูข้อมูล, POST สำหรับการเพิ่มข้อมูล, PUT สำหรับการอัพเดทข้อมูล และ DELETE สำหรับการลบข้อมูล ทำให้การเขียน class และ function ต่างๆ ยืดหยุ่นขึ้น ฟังก์ชั่นเดียวอาจจะสามารถทำได้หลากหลายอย่างขึ้นอยู่กับ method ที่ส่งเข้ามา และจำนวนของเส้นทางสามารถลดลงได้อีก

แหล่งข้อมูล

Developer mozila – https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

FETCH คืออิหยัง?