إرسال طلب POST لواجهة برمجة التطبيقات (API) باستخدام JavaScript باستخدام الجلب

فهم كيفية إرسال طلب POST لواجهة برمجة التطبيقات باستخدام ميزة الجلب

إرسال أ طلب ما بعد يعد ضروريًا لمشاركة البيانات والمصادقة أثناء استخدام واجهات برمجة التطبيقات. إنها طريقة يمكن الاعتماد عليها لإرسال طلبات HTTP إذا كنت تعرف كيفية استخدام JavaScript و أحضر() تقنية. لكن إنشاء الطلب بدقة قد يكون غير واضح في بعض الأحيان، خاصة عند العمل باستخدام رؤوس مثل إذن.

للمصادقة في هذه الحالة، يجب عليك إرسال طلب ما بعد إلى نقطة نهاية API. تتطلب نقطة النهاية المذكورة أعلاه بنية محددة تتكون من بيانات اعتماد مجزأة و مفتاح واجهة برمجة التطبيقات. ومع ذلك، يتم مواجهة أخطاء مشابهة لتلك التي تواجهها بشكل متكرر، خاصة عند استخدام واجهات برمجة التطبيقات الخارجية التي لها متطلبات تنسيق صارمة.

ستوضح هذه المقالة كيفية صنع طلب ما بعد باستخدام أحضر() الطريقة بشكل صحيح. سنقوم بتشخيص المشكلات المحتملة وإظهار تنسيق الرأس المناسب لمنع الأخطاء الشائعة مثل "500 خطأ داخلي في الخادم" الذي واجهته.

بحلول الوقت الذي تنتهي فيه، ستعرف بالضبط كيفية تجميع JavaScript وإرساله جلب طلب POSTمما يضمن الاتصال بواجهة برمجة التطبيقات (API) بنجاح وإرجاع البيانات المطلوبة.

فهم JavaScript Fetch API لطلبات POST

ينصب التركيز الرئيسي للنصوص المتوفرة على إرسال ملف طلب ما بعد إلى واجهة برمجة التطبيقات (API) باستخدام JavaScript أحضر() طريقة. إرسال الرؤوس المناسبة - وخاصةً إذن الرأس، الذي يحتوي على مفتاح واجهة برمجة التطبيقات (API) وبيانات الاعتماد المجزأة، يظل هو التحدي الأساسي. تتوقع واجهة برمجة التطبيقات (API) هذه البيانات كرمز مميز لحاملها، والذي يتم إرساله لاحقًا إلى الخادم للمصادقة. يتم تشفير البيانات الحساسة، مثل بيانات الاعتماد، وحمايتها عند الاتصال بين العميل والخادم باستخدام تقنية المصادقة الشائعة هذه.

عندما يتعلق الأمر بإرسال طلبات HTTP، فإن طريقة الجلب مرنة للغاية. يتم استخدام بنية الجلب الأساسية في المثال النصي الأول، حيث طريقة تم ضبطه على "POST". يشير هذا إلى واجهة برمجة التطبيقات (API) أنه يتم إرسال البيانات بدلاً من استردادها. في هذه الحالة، رؤوس يعد الكائن ضروريًا لأنه يحتوي على حقل التفويض، وهو المكان الذي يتم إرسال الرمز المميز لحامله. يتم أيضًا تضمين "نوع المحتوى: application/json" لإبلاغ الخادم بأنه يتم إرسال البيانات بتنسيق JSON. يمكن أن تنتج الأخطاء عن تفسير الخادم غير الصحيح للطلب في حالة عدم وجود ذلك.

لجعل التعليمات البرمجية أكثر قابلية للفهم وأكثر نظافة، نقدم غير متزامن/انتظار بناء الجملة في البرنامج النصي الثاني. تساعد هذه الطريقة في الاستجابة للطلبات غير المتزامنة. نحن نستخدم أ حاول/قبض كتلة بدلا من تسلسل الوعود باستخدام ثم() و يمسك(). وهذا يجعل صيانة التعليمات البرمجية أسهل وتبسيط معالجة الأخطاء. إذا كانت هناك مشكلة في استجابة واجهة برمجة التطبيقات (API)، فإننا نحددها ونسجل رسالة شاملة. يعد هذا مفيدًا بشكل خاص لاستكشاف الأخطاء وإصلاحها مثل "500 خطأ داخلي في الخادم" الذي حدث أثناء الطلب الأولي.

ينقسم منطق الجلب إلى وظيفته الخاصة في الحل الثالث، والذي يتبنى استراتيجية أكثر نمطية ويجعلها قابلة لإعادة الاستخدام. نقوم أيضًا بتنفيذ اختبار وحدة بسيط يستخدم console.assert() لتحديد ما إذا كانت الاستجابة لطلب الجلب صحيحة. يمكنك تعديل الوظيفة بسرعة لاستخدام نقاط نهاية API بديلة أو تقنيات مصادقة بفضل بنيتها المعيارية. ونظرًا لقدراته المضمنة في معالجة الأخطاء، يستطيع التطبيق مع ذلك تقديم تعليقات ثاقبة حتى في حالة عدم نجاح الطلب.

// Solution 1: Simple Fetch API with Authorization
const apiKey = 'your_api_key';
const hashedCredentials = 'your_hashed_credentials';
const url = 'https://authservice.priaid.ch/login?format=json';

fetch(url, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

// Solution 2: Fetch with Detailed Error Handling
async function postData() {
  const apiKey = 'your_api_key';
  const hashedCredentials = 'your_hashed_credentials';
  const url = 'https://authservice.priaid.ch/login?format=json';
  
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`Error ${response.status}: ${response.statusText}`);
    }
    
    const data = await response.json();
    console.log('Success:', data);
  } catch (error) {
    console.error('Fetch Error:', error.message);
  }
}
  
postData();

// Solution 3: Modular Fetch Function with Unit Test
const fetchData = async (apiKey, hashedCredentials) => {
  const url = 'https://authservice.priaid.ch/login?format=json';
  
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`Error ${response.status}: ${response.statusText}`);
    }
    
    return await response.json();
  } catch (error) {
    return { success: false, message: error.message };
  }
};

// Unit Test
const testFetchData = async () => {
  const result = await fetchData('your_api_key', 'your_hashed_credentials');
  console.assert(result.success !== false, 'Test Failed: ', result.message);
  console.log('Test Passed:', result);
};

testFetchData();

التوسع في مصادقة واجهة برمجة التطبيقات (API) ومعالجة الأخطاء في طلبات الجلب

يتطلب العمل مع واجهات برمجة التطبيقات فهمًا لكيفية إدارة الرؤوس والرموز المميزة، خاصة تلك التي تتطلب ذلك المصادقة. من المعتاد استخدام رمز Bearer المميز في إذن رأس طلب API الذي تحاول تنفيذه. من خلال نقل بيانات الاعتماد المشفرة، تتيح هذه التقنية الاتصال الآمن بين العميل الخاص بك وواجهة برمجة التطبيقات (API). عادةً ما يتم تضمين بيانات الاعتماد المجزأة ومفتاح واجهة برمجة التطبيقات (API) في الرمز المميز لحاملها. يجب أن يتم تنسيقه بشكل مناسب لمنع حدوث مشكلات مثل خطأ الخادم الداخلي 500 الذي واجهته.

عنصر حاسم في تقديم طلبات POST باستخدام أحضر() يتحقق من أن واجهة برمجة التطبيقات (API) قادرة على تلقي التنسيق المحدد ونوع البيانات التي تقدمها. للمساعدة في التأكد من أن الخادم يقرأ نص طلبك بشكل مناسب، يمكنك استخدام "نوع المحتوى: application/json". في بعض الأحيان، قد تحتاج واجهات برمجة التطبيقات إلى حقول إضافية في نص طلب POST، بما في ذلك بيانات النموذج أو معلمات الاستعلام، والتي ربما لم تكن واضحة من الوثائق في البداية.

يتطلب تطوير برامج موثوقة تتواصل مع واجهات برمجة التطبيقات الخارجية دراسة متأنية لإدارة الأخطاء. قد تواجه مشاكل إضافية بالإضافة إلى الخطأ 500، مثل أخطاء 404 أو أخطاء 400 المتعلقة ببيانات غير صحيحة أو نقاط نهاية خاطئة. استخدام أ حاول/قبض يمكن أن يساعد الحظر، إلى جانب رسائل الخطأ الشاملة وأنظمة التسجيل في التعليمات البرمجية الخاصة بك، في تشخيص هذه المشكلات وحلها. قبل دمج الطلبات في التعليمات البرمجية الخاصة بك، من الجيد دائمًا اختبارها باستخدام برامج مثل Postman أو Curl للتأكد من أن كل شيء يعمل كما ينبغي.