ofetch ทางเลือก HTTP client แบบเบาที่หลายทีมเริ่มใช้แทน axios

ในช่วงหลังมานี้ ofetch กลายเป็นชื่อที่ถูกพูดถึงมากขึ้นในหมู่นักพัฒนา JavaScript โดยเฉพาะทีมที่กำลังมองหา HTTP client ที่เบา ใช้งานง่าย และรองรับหลายสภาพแวดล้อมได้ดี ตั้งแต่ Node.js, Browser ไปจนถึง Edge runtime

จุดเด่นของมันไม่ใช่การพยายามเป็นเครื่องมือที่ทำได้ทุกอย่าง แต่เป็นการโฟกัสที่งานสำคัญอย่างการส่ง HTTP request ให้สั้น กระชับ อ่านง่าย และพร้อมใช้งานจริงในโปรเจกต์สมัยใหม่

ทำไม ofetch ถึงเริ่มได้รับความสนใจ

หลายโปรเจกต์ในปัจจุบันไม่ได้ต้องการ HTTP client ที่มี abstraction หนามาก หรือมีฟีเจอร์ซับซ้อนเกินความจำเป็น สิ่งที่หลายทีมต้องการจริง ๆ คือเครื่องมือที่ช่วยให้การเรียก API ทำได้ง่าย โค้ดไม่ยืดเยื้อ และสามารถทำงานข้าม environment ได้โดยไม่ต้องแก้หลายรอบ

ofetch ตอบโจทย์นี้ได้ดี เพราะมีแนวคิดที่เรียบง่ายแต่ใช้งานได้ครอบคลุมในเคสทั่วไป โดยเฉพาะสำหรับทีมที่ทำงานกับ Nuxt, Nitro, Serverless หรือ Full Stack JavaScript

ความเรียบง่ายที่ช่วยลดภาระการเขียนโค้ด

หนึ่งในจุดที่ทำให้ ofetch น่าสนใจคือการมี smart parsing ในตัว หาก response เป็น JSON มักจะถูก parse ให้พร้อมใช้งานทันที ทำให้โค้ดสั้นลงกว่าการใช้ fetch แบบปกติ

ตัวอย่างเปรียบเทียบ:

const res = await fetch('/api/posts')
const data = await res.json()

เมื่อใช้ ofetch:

const data = await ofetch('/api/posts')

แม้จะดูเหมือนต่างกันเพียงเล็กน้อย แต่เมื่อเกิดขึ้นซ้ำ ๆ ในทั้งโปรเจกต์ ความต่างนี้ช่วยลดโค้ด boilerplate และทำให้โค้ดอ่านง่ายขึ้นอย่างชัดเจน

ฟีเจอร์ที่เพียงพอสำหรับงานจริง

แม้ ofetch จะเป็นเครื่องมือขนาดเล็ก แต่ก็มีความสามารถที่เพียงพอสำหรับการใช้งานในระดับโปรดักชัน เช่น

• การกำหนด baseURL
• การส่ง query
• การกำหนด headers
• การตั้ง timeout
• การรองรับ retry

สิ่งเหล่านี้ทำให้มันสามารถนำไปใช้แทน axios ได้ในหลายสถานการณ์ โดยเฉพาะโปรเจกต์ที่ต้องเรียก API หลาย endpoint จากโดเมนเดียวกัน

ตัวอย่าง:

const api = ofetch.create({
  baseURL: 'https://api.example.com',
  retry: 2,
  timeout: 3000
})

const user = await api('/users/7', {
  query: { include: 'profile' }
})

แนวทางนี้ช่วยให้โค้ดเป็นระเบียบมากขึ้น และลดการเขียน URL ซ้ำ ๆ ในหลายจุดของระบบ

เหมาะกับ modern runtime มากกว่าเครื่องมือรุ่นเก่าในบางเคส

อีกเหตุผลสำคัญที่หลายคนเริ่มหันมามอง ofetch คือมันเข้ากับโลกของ modern runtime ได้ดี ไม่ว่าจะเป็น Edge functions หรือ environment ที่ต้องการลด dependency ให้เบาที่สุด

สำหรับทีมที่ใส่ใจเรื่อง performance โดยเฉพาะในช่วง cold start ขนาดของแพ็กเกจและความเรียบง่ายของเครื่องมือมีผลจริง การเลือกใช้ client ที่เล็กกว่าอาจช่วยให้ระบบคล่องตัวขึ้นได้

ในจุดนี้ ofetch จึงโดดเด่นสำหรับงานประเภท:

• เว็บแอปที่มีทั้งฝั่ง client และ server
• โปรเจกต์ Nuxt หรือ Node ที่ต้องการใช้ API client รูปแบบเดียวกัน
• งาน serverless และ edge ที่ต้องการลดน้ำหนัก dependency
• internal dashboard ที่ต้องเรียก REST API จำนวนมาก

เมื่อไรที่ ofetch อาจเหมาะกว่า axios

axios ยังคงเป็นเครื่องมือที่แข็งแรงและเหมาะกับหลายสถานการณ์ โดยเฉพาะระบบที่พึ่งพา interceptor ซับซ้อน หรือมีการใช้งานฟีเจอร์เฉพาะทางจำนวนมาก

อย่างไรก็ตาม หากโปรเจกต์ของคุณไม่ได้ต้องการความสามารถระดับนั้น ofetch อาจเป็นตัวเลือกที่ดีกว่าในแง่ของความเบา ความเร็ว และความชัดเจนของโค้ด

แนวคิดสำคัญคือ บางครั้งการเลือกเครื่องมือที่เล็กลง ไม่ได้แปลว่าความสามารถน้อยลงเสมอไป แต่หมายถึงการเลือกสิ่งที่ “พอดี” กับปัญหามากกว่า

การจัดการ error และการทำงานร่วมกับ TypeScript

ofetch ยังมีจุดเด่นเรื่องการจัดการ error ที่ค่อนข้างตรงไปตรงมา ทำให้อ่านโค้ดได้ง่าย และเหมาะกับการสร้าง API client ภายในทีม เพราะช่วยให้การดัก status code และอ่านข้อความตอบกลับทำได้อย่างเป็นระบบ

สำหรับทีมที่ใช้ TypeScript ก็จะยิ่งได้ประโยชน์มากขึ้น เพราะสามารถระบุรูปแบบข้อมูลที่คาดหวังในตอน request ได้ ช่วยให้ editor autocomplete แม่นยำขึ้น และลดความผิดพลาดเวลานำข้อมูลไปใช้งานต่อ

ผลลัพธ์คือโค้ดที่สะอาดขึ้น ดูแลง่ายขึ้น และปลอดภัยขึ้นในแง่ของชนิดข้อมูล

ofetch เหมาะกับใครบ้าง

หากต้องสรุปแบบใช้งานจริง ofetch จะเหมาะมากกับทีมที่มีลักษณะงานดังนี้

1. ต้องการ HTTP client ที่เบาและไม่ซับซ้อน
2. ใช้งาน JavaScript หรือ TypeScript ทั้งฝั่ง frontend และ backend
3. ทำงานกับ Nuxt, Nitro, Node, Serverless หรือ Edge runtime
4. ต้องการลด dependency ที่ไม่จำเป็น
5. อยากให้โค้ดเรียก API อ่านง่ายและสั้นลง

หากทีมของคุณกำลังมองหาทางเลือกใหม่แทน axios โดยไม่ได้ต้องใช้ฟีเจอร์ขั้นสูงจำนวนมาก ofetch ถือเป็นตัวเลือกที่ควรลองอย่างจริงจัง

สรุป

ofetch เป็น HTTP client ที่เน้นความเบา เรียบง่าย และเหมาะกับ ecosystem สมัยใหม่ของ JavaScript จุดแข็งของมันคือการใช้งานที่กระชับ รองรับหลาย runtime มีฟีเจอร์พื้นฐานครบสำหรับงานจริง และช่วยให้โค้ดสะอาดขึ้นได้มาก

มันอาจไม่ได้พยายามเป็นทุกอย่างสำหรับทุกคน แต่ในโปรเจกต์จำนวนมาก นั่นกลับเป็นข้อดี เพราะช่วยให้ทีมเลือกเครื่องมือที่พอดี ใช้งานคล่อง และดูแลรักษาได้ง่ายในระยะยาว

ถ้าคุณหรือทีมกำลังมองหา HTTP client ตัวใหม่สำหรับโปรเจกต์ถัดไป ofetch คือหนึ่งในชื่อที่ควรหยิบมาทดสอบ

แหล่งอ้างอิง

• https://api.example.com