แปลง curl เป็น JavaScript
curl2code แปลงคำสั่ง curl เป็นโค้ด JavaScript โดยใช้ fetch API ดั้งเดิม ทุกอย่างทำงานภายในเบราว์เซอร์ของคุณผ่าน WebAssembly เพื่อความเป็นส่วนตัวที่สมบูรณ์ หากคุณต้องการโค้ด Node.js ฝั่งเซิร์ฟเวอร์ ลองใช้ ตัวแปลง curl เป็น Node.js ของเรา สำหรับความปลอดภัยด้านประเภทข้อมูล (type safety) ตรวจสอบ ตัวแปลง curl เป็น TypeScript ด้านล่างนี้คือตัวอย่างการใช้งานจริงสำหรับรูปแบบ HTTP ทั่วไป
วิธีคัดลอก curl จากเบราว์เซอร์ของคุณ
- 1
เปิด DevTools
กด F12 หรือ Ctrl+Shift+I เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์
- 2
ไปที่แท็บ Network
คลิกแท็บ Network และดำเนินการที่ทริกเกอร์คำขอ HTTP
- 3
คัดลอกเป็น cURL
คลิกขวาที่คำขอ → Copy → Copy as cURL จากนั้นนำมาวางด้านบน
คำถามที่พบบ่อย (FAQ)
Fetch API คืออะไร?
Fetch API เป็นอินเทอร์เฟซสมัยใหม่ที่ทำงานบนพื้นฐานของ promise ซึ่งมีอยู่ในเบราว์เซอร์ทั้งหมดสำหรับการส่ง HTTP requests โดยเข้ามาแทนที่ XMLHttpRequest แบบเก่าด้วย API ที่สะอาดและทรงพลังกว่า Fetch รองรับการทำ streaming, ออบเจกต์ request/response, CORS และรวมเข้ากับ async/await ได้อย่างเป็นธรรมชาติ ไม่ต้องติดตั้งเพิ่มเติมเพราะมีให้ใช้งานทั่วโลก curl2code ใช้ Fetch เป็นเอาต์พุตเริ่มต้นสำหรับการแปลง JavaScript
Fetch เทียบกับ XMLHttpRequest เทียบกับ jQuery.ajax — ควรใช้อันไหน?
Fetch คือมาตรฐานสมัยใหม่ — ควรใช้สำหรับโปรเจกต์ใหม่ XMLHttpRequest เป็นแบบเก่าแต่ยังคงใช้งานได้ทุกที่และรองรับ progress events ในตัว jQuery.ajax เพิ่มความสะดวกหากมีการใช้ jQuery ในโปรเจกต์อยู่แล้ว สำหรับ JavaScript ฝั่งเซิร์ฟเวอร์ โปรดดู ตัวแปลง curl เป็น Node.js สำหรับความปลอดภัยด้านประเภทข้อมูล ลองใช้ curl เป็น TypeScript
จะจัดการการยืนยันตัวตนด้วย Fetch อย่างไร?
ส่ง header Authorization ในตัวเลือก headers: fetch(url, { headers: { "Authorization": "Bearer token" } }) สำหรับการยืนยันตัวตนแบบ Basic ให้เข้ารหัสข้อมูลประจำตัวด้วย btoa(user + ':' + pass) โดย curl2code จะตรวจจับแฟล็ก -u และ -H 'Authorization: ...' โดยอัตโนมัติ
จะส่งข้อมูลฟอร์มแบบ multipart ด้วย Fetch อย่างไร?
สร้างออบเจกต์ FormData และส่งเป็น body: fetch(url, { method: "POST", body: formData }) ห้ามตั้งค่า Content-Type ด้วยตนเอง — เบราว์เซอร์จะเพิ่ม multipart boundary ให้โดยอัตโนมัติ curl2code จะแปลงแฟล็ก -F เป็น FormData
จะจัดการข้อผิดพลาดด้วย Fetch อย่างไร?
Fetch จะ reject เฉพาะเมื่อเกิดความล้มเหลวของเครือข่ายเท่านั้น ไม่ใช่ข้อผิดพลาด HTTP ควรตรวจสอบ response.ok หรือ response.status ก่อนอ่าน body เสมอ และครอบการเรียกใช้ด้วย try/catch ร่วมกับ async/await เพื่อจัดการทั้งข้อผิดพลาดเครือข่ายและการแยกวิเคราะห์ในที่เดียว
จะใช้ async/await กับ Fetch อย่างไร?
Fetch จะคืนค่าเป็น Promise ดังนั้นให้ใช้ const response = await fetch(url) ตามด้วย const data = await response.json() และครอบด้วยบล็อก try/catch เพื่อจัดการข้อผิดพลาด วิธีนี้สะอาดกว่าการใช้ .then() และเป็นรูปแบบที่แนะนำสำหรับ JavaScript สมัยใหม่
จะตั้งค่า timeout สำหรับ Fetch requests อย่างไร?
ใช้ AbortController: สร้าง controller, ส่ง { signal: controller.signal } ไปยัง fetch และเรียก controller.abort() หลังจากหน่วงเวลาด้วย setTimeout เบราว์เซอร์สมัยใหม่ยังรองรับ AbortSignal.timeout(5000) ซึ่งเป็นวิธีที่สั้นกว่า แฟล็ก --max-time ของ curl จะถูกจับคู่กับรูปแบบนี้
จะจัดการปัญหา CORS ด้วย Fetch อย่างไร?
CORS ถูกบังคับใช้โดยเบราว์เซอร์ ไม่ใช่โดย Fetch เอง ให้ตั้งค่า mode: 'cors' (ค่าเริ่มต้น) และตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ส่ง header Access-Control-Allow-Origin ที่ถูกต้อง สำหรับข้อมูลประจำตัว (cookies) ให้เพิ่ม credentials: 'include' ทั้งนี้ CORS ไม่ใช้กับโค้ดฝั่งเซิร์ฟเวอร์ — สำหรับกรณีนั้น โปรดดู ตัวแปลง curl เป็น Node.js
วิธีส่งคำขอ POST พร้อม JSON body ใน JavaScript?
แปลงคำสั่ง curl POST เช่น curl -X POST -H "Content-Type: application/json" -d '{"key":"value"}' URL เป็น JavaScript โดยใช้ curl2code โค้ดที่สร้างขึ้นจะใช้ fetch(url, { method: 'POST', body: JSON.stringify(data), headers: {'Content-Type': 'application/json'} }) โดย curl2code จะตรวจจับแฟล็ก -d/--data ที่มีเนื้อหา JSON โดยอัตโนมัติ และตั้งค่าส่วนหัว Content-Type ที่เหมาะสมในโค้ด fetch
วิธีเพิ่มการยืนยันตัวตนด้วย Bearer token ใน JavaScript?
ส่ง curl -H "Authorization: Bearer YOUR_TOKEN" URL ไปยัง curl2code และเครื่องมือจะสร้างโค้ด fetch พร้อมส่วนหัวการยืนยันตัวตน: headers: { 'Authorization': 'Bearer YOUR_TOKEN' } โดย curl2code จะตรวจจับ Bearer tokens จากทั้งแฟล็ก -H "Authorization: Bearer ..." และ --oauth2-bearer สำหรับ Basic auth ให้ใช้ -u user:pass
วิธีตั้งค่าส่วนหัว Content-Type ใน JavaScript?
curl2code จะแปลง curl -H "Content-Type: application/json" URL เป็นโค้ด fetch พร้อมส่วนหัวที่ถูกต้อง: headers: { 'Content-Type': 'application/json' } สำหรับข้อมูล -d นั้น curl จะกำหนดค่าเริ่มต้นเป็น application/x-www-form-urlencoded ส่วนการอัปโหลดฟอร์ม -F จะใช้ multipart/form-data โดย curl2code จะจับคู่แต่ละรายการเข้ากับ fetch API ที่ถูกต้อง