تحويل curl إلى JavaScript
يقوم curl2code بتحويل أوامر curl إلى كود JavaScript باستخدام fetch API الأصلي. يتم تشغيل كل شيء محلياً في متصفحك عبر WebAssembly لخصوصية تامة. إذا كنت بحاجة إلى كود Node.js لجهة الخادم، فجرب محول curl إلى Node.js. لضمان سلامة الأنواع، راجع محول curl إلى TypeScript. أدناه أمثلة عملية لأنماط HTTP الشائعة.
كيفية نسخ curl من متصفحك
- 1
افتح أدوات المطور (DevTools)
اضغط على F12 أو Ctrl+Shift+I لفتح أدوات مطور المتصفح.
- 2
انتقل إلى علامة تبويب الشبكة (Network)
انقر فوق علامة التبويب Network وقم بالإجراء الذي يؤدي إلى إرسال طلب HTTP.
- 3
نسخ كـ cURL
انقر بزر الماوس الأيمن على الطلب ← Copy ← Copy as cURL. ثم قم بلصقه أعلاه.
الأسئلة الشائعة
ما هي Fetch API؟
تعد Fetch API واجهة حديثة تعتمد على الوعود (promises) ومدمجة في جميع المتصفحات لإجراء طلبات HTTP. وهي تحل محل XMLHttpRequest القديمة بواجهة أنظف وأكثر قوة. تدعم Fetch البث (streaming)، وكائنات الطلب/الاستجابة، و CORS، وتتكامل بشكل طبيعي مع async/await. لا حاجة للتثبيت — فهي متاحة عالمياً. يستخدم curl2code مكتبة Fetch كمخرج افتراضي لتحويلات JavaScript.
مقارنة بين Fetch و XMLHttpRequest و jQuery.ajax — أيهما يجب أن أستخدم؟
تعد Fetch هي المعيار الحديث — استخدمها للمشاريع الجديدة. XMLHttpRequest قديمة ولكنها لا تزال تعمل في كل مكان وتدعم أحداث التقدم (progress events) بشكل أصلي. jQuery.ajax تضيف سهولة إذا كان jQuery موجوداً بالفعل في مشروعك. لـ JavaScript من جانب الخادم، راجع محول curl إلى Node.js. لضمان سلامة الأنواع، جرب curl إلى TypeScript.
كيفية التعامل مع المصادقة باستخدام Fetch؟
قم بتمرير ترويسة Authorization في خيار headers: fetch(url, { headers: { "Authorization": "Bearer token" } }). لمصادقة Basic، قم بتشفير بيانات الاعتماد باستخدام btoa(user + ':' + pass). يكتشف curl2code أعلام -u و -H 'Authorization: ...' تلقائياً.
كيفية إرسال بيانات نموذج متعدد الأجزاء مع Fetch؟
قم بإنشاء كائن FormData ومرره كجسم للطلب: fetch(url, { method: "POST", body: formData }). لا تقم بضبط Content-Type يدوياً — المتصفح يضيف حدود الأجزاء (boundary) تلقائياً. يقوم curl2code بتحويل أعلام -F إلى FormData.
كيفية التعامل مع الأخطاء مع Fetch؟
ترفض Fetch الوعد فقط عند فشل الشبكة، وليس عند أخطاء HTTP. تحقق دائماً من response.ok أو response.status قبل قراءة جسم الاستجابة. قم بتغليف الاستدعاءات في try/catch مع async/await للتعامل مع أخطاء الشبكة والتحليل في مكان واحد.
كيفية استخدام async/await مع Fetch؟
تعيد Fetch وعداً (Promise)، لذا استخدم const response = await fetch(url) متبوعاً بـ const data = await response.json(). قم بتغليفها في كتلة try/catch للتعامل مع الأخطاء. هذا النمط أنظف من سلاسل .then() وهو النمط الموصى به في JavaScript الحديثة.
كيفية ضبط مهلة لطلبات Fetch؟
استخدم AbortController: أنشئ وحدة تحكم، ومرر { signal: controller.signal } إلى fetch، واستدعِ controller.abort() بعد تأخير باستخدام setTimeout. تدعم المتصفحات الحديثة أيضاً AbortSignal.timeout(5000) كحل بسيط في سطر واحد. يتم تعيين --max-time في curl إلى هذا النمط.
كيفية التعامل مع مشكلات CORS مع Fetch؟
يتم فرض CORS بواسطة المتصفح، وليس بواسطة Fetch نفسها. اضبط mode: 'cors' (الافتراضي) وتأكد من أن الخادم يرسل ترويسات Access-Control-Allow-Origin الصحيحة. لبيانات الاعتماد (cookies)، أضف credentials: 'include'. لا ينطبق CORS على كود جانب الخادم — لذلك، راجع محول curl إلى Node.js.
كيف يمكن إرسال طلب POST مع جسم JSON في 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 من كل من وسوم -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 بربط كل منها بـ API الصحيح في fetch.