API (واجهة برمجة التطبيقات) هي مجموعة من البروتوكولات التي تسمح للتطبيق بإرسال الطلبات إلى الخادم وتلقي استجابة.

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

لمعرفة كيفية استهلاك واجهات برمجة تطبيقات REST في React باستخدام Fetch و Axios ، ستنشئ تطبيق React بسيطًا يحصل على حقيقة عشوائية عن القطط من واجهة برمجة التطبيقات عندما تنقر على زر.

أنواع واجهات برمجة التطبيقات

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

instagram viewer

تسمح لك واجهات برمجة تطبيقات REST بالحصول على البيانات من مصدر من خلال عنوان URL. في React ، هناك عدة طرق يمكنك استخدامها لاستهلاك واجهات برمجة تطبيقات REST. تتناول هذه المقالة الطريقتين الأكثر شيوعًا وهما JavaScript Fetch API وعميل HTTP المستند إلى الوعد Axios.

متعلق ب: ما هي واجهة برمجة تطبيقات REST وكيف يمكنك الحصول على بيانات لتطبيقك أو موقعك على الويب

المتطلبات الأساسية

لمتابعة هذا الدليل ، يجب أن يكون لديك:

  • الفهم الأساسي لجافا سكريبت.
  • المعرفة الأساسية بـ React و React hooks.
  • تم تثبيت NPM محليًا على جهازك.
  • تم تثبيت محرر نصوص أو IDE من اختيارك.

أنشئ تطبيق React

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

npx إنشاء تفاعل تطبيق

بمجرد اكتمال تنفيذ الأمر ، افتح ملف كاتفا مجلد في محرر النصوص الخاص بك. ستكتب الكود الخاص بك في ملف App.js بامتداد src مجلد لذا انطلق وقم بإزالة الكود غير الضروري.

استيراد "./App.css" ؛
وظيفة التطبيق () {
 إرجاع (


اضغط على الزر للحصول على حقيقة قطة عشوائية!









 );
}
تصدير التطبيق الافتراضي ؛

بعد ذلك ، قم بإنشاء واجهة مستخدم بسيطة تستخدم لعرض حقيقة القط العشوائية.

في app.js

استيراد "./App.css" ؛
وظيفة التطبيق () {
 إرجاع (


اضغط على الزر للحصول على حقيقة قطة عشوائية!









 );
}
تصدير التطبيق الافتراضي ؛

لتصميم تطبيقك ، أضف الكود التالي إلى ملف app.css ملف.

import url (' https://fonts.googleapis.com/css2?family=Playfair+Display: ital، wght @ 700؛ 500 & display = swap ') ؛
.تطبيق {
 عائلة الخطوط: "Playfair Display" ، serif ؛
 الهامش: 20px 15vw ؛
}
h2 {
 عائلة الخطوط: "Playfair Display" ، serif ؛
 وزن الخط: 700 ؛
 حجم الخط: 3em ؛
}
زر {
 الحشو: 1em 1.2em ؛
 الحدود: لا يوجد ؛
 حجم الخط: 1em ؛
 لون الخلفية: # 131212 ؛
 اللون: #ffffff ؛
 نصف قطر الحدود: 0.5em ؛
 المؤشر: المؤشر.
}
الزر: تحوم {
 لون الخلفية: # 3b3b3b ؛
}

يجب أن يبدو تطبيقك الآن بهذا الشكل.

في الخطوات التالية ، ستقوم بجلب البيانات من API وعرضها في التطبيق.

متعلق ب: كيفية إنشاء أول تطبيق تفاعل باستخدام JavaScript

استهلاك واجهات برمجة تطبيقات REST باستخدام الجلب

جلب API هي واجهة تتيح لك الحصول على موارد من واجهة برمجة التطبيقات من خلال طلبات HTTP. ال أحضر() يتلقى التابع URL الخاص بالمسار إلى المورد كوسيطة إلزامية ويعيد وعدًا يمكنه حل الاستجابة.

البنية الأساسية لملف أحضر() الطريقة على النحو التالي:

جلب ("url إلى الموارد")
 ثم (الاستجابة => // التعامل مع الاستجابة)
 .catch (يخطئ => // معالجة الخطأ)

تنفيذ الجلب API

في React ، تُستخدم Fetch API بنفس طريقة استخدامها في JavaScript عادي.

أحضر(" https://catfact.ninja/fact")
 ثم (response => response.json ())
 ثم (data => // معالجة البيانات)
 .catch (يخطئ => // معالجة الخطأ)

في السطر الأول من الكود أعلاه ، تقوم بتمرير عنوان URL الخاص بواجهة برمجة التطبيقات إلى ملف أحضر() طريقة. أحضر() إرجاع استجابة HTTP التي تم تحويلها إلى JSON باستخدام json () طريقة. في السطر الثالث ، يمكنك الوصول إلى البيانات التي يمكنك استخدامها بعد ذلك في التطبيق. أخيرًا ، تسمح لك كتلة catch بالتعامل مع الأخطاء بأمان.

لتنفيذ طلب الجلب في مكون التطبيق ، ستستخدم خطافات React. باستخدام ملف useEffect hook ، سيقوم التطبيق الخاص بك بتقديم الطلب بمجرد تحميل المكون و useState سيتم إنشاء وتحديث حالة المكون. يضمن تتبع الحالة إعادة عرض المكون عندما تُرجع واجهة برمجة تطبيقات الجلب الاستجابة.

متعلق ب: خطاف: بطل رد الفعل

استيراد useState و useEffect.
استيراد {useEffect، useState} من "رد فعل"

أنشئ حالة للاحتفاظ بحقيقة القط ووظيفة تحديثها.

const [fact، setFact] = useState ('')

بعد ذلك ، قم بإنشاء دالة لإجراء طلب GET على واجهة برمجة التطبيقات واستدعائها في ملف useEffect صنارة صيد.

const fetchFact = () => {
أحضر(" https://catfact.ninja/fact")
 ثم ((response) => response.json ())
 ثم ((البيانات) => setFact (data.fact)) ؛
}
useEffect (() => {
 fetchFact ()
}, []);

يجب أن يبدو ملف app.js الآن على النحو التالي:

استيراد "./App.css" ؛
استيراد {useEffect، useState} من "رد فعل" ؛
وظيفة التطبيق () {
 const [fact، setFact] = useState ("") ؛
 const fetchFact = () => {
 أحضر(" https://catfact.ninja/fact")
 ثم ((response) => response.json ())
 ثم ((البيانات) => setFact (data.fact)) ؛
}
useEffect (() => {
 fetchFact ()
}, []);
إرجاع (


اضغط على الزر للحصول على حقيقة قطة عشوائية!





{حقيقة}






);
}
تصدير التطبيق الافتراضي ؛

يجب أن تكون الآن قادرًا على رؤية حقيقة عشوائية عن القطط المعروضة في متصفحك.

بعد ذلك ، اكتب رمزًا لعرض حقيقة عشوائية عند النقر فوق الزر.

قم بتعديل الزر لتضمين ملف عند النقر الحدث ووظيفة المعالج.


تحديد مقبض انقر () تعمل كما هو موضح أدناه.

const handleClick = () => {
 fetchFact ()
}

الآن ، عند النقر فوق الزر ، فإن ملف مقبض انقر () ستستدعي الوظيفة ابحث عن المعلومة() الذي سينفذ طلب واجهة برمجة التطبيقات ويحدّث الحالة بحقيقة عشوائية جديدة. وبالتالي ، سيتم تحديث واجهة مستخدم التطبيق لعرض الحقيقة الحالية.

استهلاك REST APIs باستخدام Axios

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

  • يقوم Axios تلقائيًا بإرجاع الاستجابة في JSON بينما يتعين عليك تحويلها إلى JSON عند استخدام Fetch API.
  • يتطلب Axios رد اتصال واحد فقط. ثم () بخلاف Fetch API.
  • يتوافق Axios مع المتصفحات الرئيسية بينما Fetch مدعوم فقط في Chrome 42+ و Edge 14 + و Firefox 39+ و Safari 10+

تنفيذ أكسيوس

قم بتثبيت Axios عن طريق تشغيل الأمر التالي.

npm تثبيت أكسيوس

بعد اكتمال التثبيت ، قم باستيراد حزمة Axios إلى مكون التطبيق الخاص بك وقم بتعديل ملف fetchFact () وظيفة لاستخدامه.

استيراد أكسيوس من "أكسيوس"
const fetchFact = () => {
 axios.get (" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

هذا هو! يجب أن يعرض التطبيق الخاص بك حقيقة قطة عشوائية عند تحميله في المتصفح وعند النقر فوق الزر.

المزيد من الاستخدامات لواجهات برمجة التطبيقات مع React

يمكنك استهلاك واجهات برمجة تطبيقات REST في React باستخدام طرق مختلفة. في هذا البرنامج التعليمي ، تعلمت كيفية استخدام Fetch و Axios لجلب حقيقة عشوائية من REST API. حالات استخدام واجهات برمجة التطبيقات في تطبيقات العالم الحقيقي لا حصر لها.

على سبيل المثال ، من خلال واجهات برمجة تطبيقات الدفع مثل Stripe و PayPal ، يمكن للمتاجر التعامل بسهولة مع معاملات العملاء عبر الإنترنت دون الحاجة إلى تنفيذ الوظيفة بنفسها. لذلك ، يمكن للمستخدمين الأقل ذكاءً من التكنولوجيا إنشاء تطبيقات مفيدة تخدم احتياجاتهم.

ما هي مصادقة API وكيف تعمل؟

كيف تثبت أن الشخص الذي يريد الوصول إلى البيانات المهمة هو من يقولون؟ وهنا يأتي دور مصادقة API ...

اقرأ التالي

شاركسقسقةبريد الالكتروني
مواضيع ذات صلة
  • برمجة
  • تتفاعل
  • API
عن المؤلف
طاقم MUO

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك