แปลง cURL → fetch / axios JavaScript

cURL เป็น command-line tool ที่นิยมใช้สำหรับยิง HTTP request เพื่อทดสอบ API, ดาวน์โหลดไฟล์ หรือ debug network การ copy เป็น ‘Copy as cURL’ จาก DevTools ของเบราว์เซอร์เป็นวิธีมาตรฐานในการแชร์ request ระหว่างนักพัฒนา

เมื่อจะเอา curl command ไปใช้ใน JavaScript — เช่นต้องเขียน frontend ให้ยิง API เดียวกัน — ต้องแปลงเป็น fetch() หรือ axios เครื่องมือนี้ช่วยแปลงอัตโนมัติ รองรับ method, headers, body, และ basic auth

• -X, --request — ระบุ HTTP method (GET/POST/PUT/DELETE/PATCH)
• -H, --header — เพิ่ม header เช่น 'Content-Type: application/json'
• -d, --data / --data-raw — body ของ request (มักใช้กับ POST)
• -u, --user — basic auth ในรูป username:password
• --location / -L — follow redirects
• --compressed — ขอ gzip/deflate response

• fetch — built-in ใน browser และ Node 18+ ไม่ต้อง install ขนาด bundle เล็ก
• fetch — ต้อง .then(r => r.json()) เอง และไม่ throw บน HTTP error
• axios — library เพิ่ม ~14KB แต่ API สะอาด parse JSON อัตโนมัติ
• axios — throw ทันทีบน HTTP 4xx/5xx, interceptor สำหรับ auth, timeout built-in
• ใช้ fetch สำหรับ code ใหม่ที่ไม่อยากเพิ่ม dependency
• ใช้ axios ถ้าต้องการ interceptor, progress event, หรือใช้ใน codebase เก่าอยู่แล้ว

• Copy curl จาก Chrome DevTools (Network → Copy as cURL) แล้วแปลงเป็น fetch เพื่อใช้ใน frontend
• แปลง curl example ในเอกสาร API ให้เป็น JavaScript ทันที
• Debug API โดย test curl แล้วค่อย port ไปเป็น axios ใน production
• สอนน้องใหม่ในทีมว่า curl flags ต่างๆ ตรงกับ property ไหนใน fetch/axios
• ย้าย test script จาก shell เป็น Node.js

• ตรวจสอบ Content-Type header ให้ตรง — JSON ต้องเป็น application/json
• axios parse JSON body อัตโนมัติ ส่ง object ได้เลย ต่าง fetch ที่ต้อง JSON.stringify เอง
• ใส่ error handling ทุกครั้ง — fetch ไม่ throw บน 404/500 ต้องเช็ค response.ok
• ระวัง credentials — cURL -u กลายเป็น Authorization: Basic ... ซึ่งไม่ควร hardcode ในโค้ด frontend
• ถ้า curl มี --data-binary กับไฟล์ ต้องแปลงเป็น FormData หรือ FileReader ใน JS