كيفية إجراء مكالمات API في التطبيقات الزاويّة

مقدمة: لماذا تعتبر مكالمات API مهمة في التطبيقات الزاويّة

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

لنأخذ بعض الأمثلة الواقعية لتوضيح ذلك.

على سبيل المثال ، ضع في اعتبارك تطبيق حجز السفر. هنا ، تُستخدم مكالمات Angular API لاسترداد معلومات الرحلة أو توفر الفندق أو تنبؤات الطقس من واجهات برمجة تطبيقات مختلفة. ثم يتم عرض البيانات التي يتم جلبها من واجهات برمجة التطبيقات هذه ديناميكيًا للمستخدم ، مما يوفر تجربة تصفح سلسة.

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

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

تحقق من دوراتنا المجانية للتغلب على المنافسة.

إعداد البيئة الزاويّة لمكالمات API

قبل الخوض في عملية استدعاء Angular API ، فلنقم أولاً بإعداد بيئتنا Angular.

تأكد من تثبيت Node.js و npm (Node Package Manager) في نظامك. بعد ذلك ، قم بتثبيت Angular CLI (واجهة سطر الأوامر) بشكل عام باستخدام npm. سيساعدنا CLI هذا في إنشاء وإدارة مشاريع Angular الخاصة بنا دون عناء.

تثبيت npm -g @ angular / cli

الآن ، قم بإنشاء مشروع Angular جديد: ng new my-api-project

ng new my-api-project

انتقل إلى دليل المشروع: cd my-api-project

cd my-api-project

تحقق مندورات تطوير البرمجياتupGrad لتطوير مهاراتك.

فهم HTTP في Angular: وحدة HttpClient

لإجراء مكالمة API في Angular ، نستخدم بشكل أساسي وحدة HttpClient. تعمل هذه الوحدة على تبسيط تكامل واجهة برمجة التطبيقات في تطبيقات Angular من خلال تقديم واجهة برمجة تطبيقات مبسطة لطلبات HTTP. ابدأ باستيراد HttpClientModule في app.module.ts الخاص بك:

استيراد {HttpClientModule} من "@ angular / common / http" ؛

NgModule ({

الواردات: [

// واردات أخرى هنا

HttpClientModule

] ،

})

إجراء طلبات GET البسيطة: استرداد البيانات من واجهات برمجة التطبيقات

النوع الأكثر شيوعًا لاستدعاء واجهة برمجة التطبيقات في Angular هو طلب GET ، والذي يستخدم لاسترداد البيانات من الخادم. قم باستيراد HttpClient في المكون الخاص بك وحقنه من خلال المنشئ. بعد ذلك ، استخدم طريقة get () لجلب البيانات من واجهة برمجة التطبيقات:

استيراد {HttpClient} من "@ angular / common / http" ؛

فئة التصدير AppComponent {

المُنشئ (http: HttpClient خاص) {}

ابحث عن المعلومة() {

this.http.get ('https://api.example.com/data') .subscribe (data => {

console.log (البيانات) ؛

}) ؛

}

}

معالجة الأخطاء والاستثناءات في استدعاءات واجهة برمجة التطبيقات

يجب عليك دائمًا توقع الأخطاء والاستثناءات عند التعامل مع استدعاءات واجهة برمجة التطبيقات في Angular. ترجع الوحدة النمطية HttpClient يمكن ملاحظته. يمكنك استخدام معامل catchError من RxJS لمعالجة الأخطاء بأمان:

استيراد {catchError} من 'rxjs / Operators' ؛

استيراد {throwError} من "rxjs" ؛

ابحث عن المعلومة() {

this.http.get ('https://api.example.com/data') .pipe (

catchError (خطأ => {

console.error ('حدث خطأ:' ، خطأ) ؛

إرجاع throwError (خطأ) ؛

})

) .subscribe (data => {

console.log (البيانات) ؛

}) ؛

}

إجراء طلبات POST: إرسال البيانات إلى واجهات برمجة التطبيقات

مثلما يمكننا استرداد البيانات باستخدام طلب GET ، يمكننا أيضًا إرسال البيانات إلى واجهة برمجة التطبيقات باستخدام طلب POST. يعد هذا النوع من استدعاء Angular API أمرًا بالغ الأهمية عندما نحتاج إلى إرسال البيانات من تطبيق Angular الخاص بنا إلى الخادم:

أرسل البيانات() {

const body = {title: 'Angular Post'، content: 'Sending data to API'}؛

this.http.post ('https://api.example.com/posts'، body) .subscribe (response => {

console.log (استجابة) ؛

}) ؛

}

تحميل الملفات باستخدام استدعاءات API: استخدام كائن FormData

لتحميل الملفات في استدعاء واجهة برمجة التطبيقات في Angular ، يمكننا استخدام كائن FormData ، والذي يسمح لنا بإرسال أزواج ذات قيمة مفتاح كبيانات نموذجية:

uploadFile (ملف: ملف) {

const formData = new FormData () ؛

formData.append ('ملف' ، ملف) ؛

this.http.post ('https://api.example.com/upload'، formData) .subscribe (response => {

console.log (استجابة) ؛

}) ؛

}

العمل مع معلمات الاستعلام في استدعاءات API

تعد معلمات الاستعلام جزءًا أساسيًا من استدعاءات API في Angular ، وغالبًا ما تستخدم لتصفية البيانات أو فرزها. توفر وحدة HttpClient طريقة سهلة لإضافة معلمات الاستعلام إلى طلباتك:

ابحث عن المعلومة() {

this.http.get ('https://api.example.com/data'، {

المعلمات: {

فرز تصاعدي'،

الحد: "10"

}

}). اشتراك (بيانات => {

console.log (البيانات) ؛

}) ؛

}

تخزين البيانات في ذاكرة التخزين المؤقت لأداء أفضل: استخدام اعتراضات HTTP

يمكن أن يؤدي التخزين المؤقت للبيانات إلى تحسين أداء تطبيق Angular بشكل كبير. هذا هو المكان الذي تلعب فيه HTTP Interceptors. إنها تسمح لك باعتراض طلبات واستجابات HTTP ، وهي مكان مثالي لتنفيذ استراتيجية التخزين المؤقت. يمكنك استخدام Angular LocalStorage أو IndexedDB داخل Web Worker في Angular لتخزين ذاكرة التخزين المؤقت.

@ حقن ()

فئة التصدير CacheInterceptor تنفذ HttpInterceptor {

constructor (private cache: CacheService) {} // بافتراض أن لديك خدمة تخزين مؤقت

التقاطع (req: HttpRequest <any> ، التالي: HttpHandler): ملحوظ <HttpEvent <any>> {

const cachedResponse = this.cache.get (req) ،

إذا (cachedResponse) {

عودة (cachedResponse) ؛

}

العودة next.handle (req) .pipe (

انقر (الحدث => {

إذا (مثيل الحدث من HttpResponse) {

this.cache.put (req، event) ؛// تحديث ذاكرة التخزين المؤقت.

}

})

) ؛

}

}

اختبار استدعاءات واجهة برمجة التطبيقات في Angular: الاستهزاء بطلبات HTTP باستخدام HttpClientTestingModule

يعد الاختبار جانبًا مهمًا من جوانب تكامل Angular API. لاختبار مكالمات API الخاصة بنا ، يوفر Angular HttpClientTestingModule. تسمح لنا هذه الوحدة بالاستهزاء بطلبات HTTP ، مما يمكننا من اختبار مكوناتنا وخدماتنا بمعزل عن غيرها دون استدعاءات API فعلية:

استيراد {HttpClientTestingModule، HttpTestingController} من "@ angular / common / http / testing" ؛

beforeEach (() => {

TestBed.configureTestingModule ({

الواردات: [HttpClientTestingModule] ،

}) ؛

httpMock = TestBed.inject (HttpTestingController) ،

}) ؛

it ('should make a GET request'، () => {

service.fetchData (). subscribe () ؛

const req = httpMock.expectOne ('https://api.example.com/data') ؛

توقع (req.request.method) .toEqual ('GET') ؛

req.flush ({data: 'Test data'})؛

}) ؛

نصائح يجب وضعها في الاعتبار أثناء إجراء مكالمات API في التطبيقات الزاويّة

قد يبدو إجراء استدعاء API في Angular أمرًا بسيطًا ، ولكن الفروق الدقيقة يمكن أن تؤثر بشكل كبير على أداء وموثوقية التطبيق الخاص بك. فيما يلي بعض النصائح المهمة التي يجب وضعها في الاعتبار:

1. استخدم HttpClient: تعد وحدة HttpClient أداة قوية لاستدعاءات Angular API.يوفر واجهة برمجة تطبيقات مبسطة لطلبات HTTP ويلخص التعقيدات الأساسية لتقديم الطلبات.
2. تعامل مع الأخطاء برشاقة: توقع دائمًا حدوث خطأ ما في استدعاءات واجهة برمجة التطبيقات في Angular.استخدم عامل التشغيل catchError من RxJS لمعالجة أي أخطاء محتملة أثناء استدعاء API.
3. تحسين مكالمات API: تجنب إجراء مكالمات غير ضرورية لواجهة برمجة التطبيقات.استفد من Angular LocalStorage أو التخزين المؤقت لتخزين البيانات التي قد تحتاج إلى إعادة استخدامها. هذا يقلل من الحمل على الخادم ويحسن أداء التطبيق.
4. استخدم Web Worker في Angular للمهام الثقيلة: ضع في اعتبارك استخدام Web Worker في Angular إذا كنت تتعامل مع مهام حسابية ثقيلة أو بيانات كبيرة الحجم.سيضمن ذلك أن تظل واجهة المستخدم الخاصة بك سلسة وسريعة الاستجابة ، حيث سيتم إلغاء تحميل المهام إلى سلسلة خلفية منفصلة.
5. تأمين مكالمات واجهة برمجة التطبيقات (API) الخاصة بك: الأمن هو الأهم.تأكد من استخدام بروتوكولات آمنة (مثل HTTPS) لاستدعاء Angular API الخاص بك. أيضًا ، لا تكشف عن بيانات حساسة مثل مفاتيح واجهة برمجة التطبيقات في التعليمات البرمجية من جانب العميل.
6. اختبار استدعاءات API الخاصة بك: الاختبار أمر حيوي لتكامل Angular API.استخدم HttpClientTestingModule للسخرية من طلبات HTTP والتأكد من أن مكالمات API تعمل كما هو متوقع.
7. ابق محدثًا: Angular هو إطار عمل يتطور باستمرار.ابق على اطلاع دائم بأحدث الإصدارات والتحديثات لإجراء مكالمات API الأكثر كفاءة وأمانًا.

تذكر أن دمج استدعاءات API بشكل فعال يمكن أن يجعل تطبيقات Angular أكثر ديناميكية واستجابة ، مما يعزز تجربة المستخدم والوظائف العامة.

استكشف دوراتنا التدريبية الشهيرة في هندسة البرمجيات

توسيع مجموعة مهاراتك من خلال دورات upGrad

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

دعنا نلقي نظرة على بعض الدورات التي يمكن أن تساعدك في نقل معرفتك إلى المستوى التالي.

دورة مطور مكدس كاملة (PGD - IIITB)

برنامج Executive PG في Full Stack Development من IIITB ، والذي تقدمه upGrad ، هو برنامج شامل يأخذك خلال رحلة من الأساسيات إلى الجوانب المتقدمة لتطوير Full Stack. تغطي الدورة التدريبية Angular في العمق ، إلى جانب تقنيات أخرى للواجهة الأمامية والخلفية. قد تكون هذه الدورة هي خطوتك الكبيرة التالية إذا كنت تطمح إلى أن تصبح مطورًا ماهرًا ومتميزًا.

هندسة البرمجيات (MCS - LJMU)

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

استكشف دوراتنا المجانية لتطوير البرمجيات

برنامج تدريب تطوير المكدس الكامل

لأولئك منكم الذين يبحثون عن رحلة تعلم مكثفة وسريعة الوتيرة ، تقدم upGrad معسكر تدريب تطوير برمجيات Full Stack . سيمكنك هذا المعسكر التدريبي بالمعرفة والمهارات التي تحتاجها لإنشاء تطبيقات ويب شاملة ، مع التركيز بشكل كبير على تقنيات الواجهة الأمامية مثل Angular.

خاتمة

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

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

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

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