محتويات الدورة

Angular / المتوسط / الدرس 9

HTTP والتحقق التنفيذي

افصل نقل HTTP من تحليل المجال ومثّل النتائج واختبر باستجابات اصطناعية دون خدمات حقيقية.

وقت القراءة التقريبي: 3 دقيقةتاريخ مراجعة المحتوى
في هذه الصفحة

أهداف الدرس

  • توفير HttpClient وشرح مكررات الطلب الباردة.
  • تحليل unknown قبل استخدام المجال.
  • اختبار الفشل والإلغاء وتكرار الاشتراك.

نوع نتيجة HTTP العام ليس فاحصًا

تقدم HttpClient واجهة محددة لسلوك HTTP بعد توفيرها. تصف get<T> ادعاء المستدعي ولا تفحص JSON لإثباته. فضّل unknown وحلل البنية وقواعد المجال. ميّز البيانات الفاسدة من النقل والفراغ المسموح. اعرض عقد التطبيق عبر خدمة بدل تكرار العنوان والتأكيد بكل مكوّن. لا يتصل المقرر بعنوان حقيقي.

بناء قيمة مجال منتقاة بعد الفحص

يفحص المحلل كائن مقرر وحقوله وهوية صحيحة موجبة وعنوانًا غير فارغ، ويعيد منتقى جديدًا. يخص JSON العادية لا وكلاء أو getters اعتباطية. يثبت القبول والرفض المحليين لا النقل أو CORS أو الإذن. أضف حدود نص وقوائم وفق المخطط ولا تحوّل النص الرقمي إلا بقاعدة موثقة.

typescript محلل استجابة محلي مكتمل
export {};
type Course = { id: number; title: string };
function decodeCourse(value: unknown): Course | undefined {
  if (typeof value !== "object" || value === null || !("id" in value) || !("title" in value)) { return undefined; }
  if (typeof value.id !== "number" || !Number.isSafeInteger(value.id) || value.id < 1) { return undefined; }
  if (typeof value.title !== "string" || value.title.length === 0) { return undefined; }
  return { id: value.id, title: value.title };
}
console.log(JSON.stringify(decodeCourse({ id: 7, title: "Forms", internal: "omit" })));
console.log(decodeCourse({ id: "7", title: "Forms" }) === undefined);
الناتج المتوقع
{"id":7,"title":"Forms"}
true

تصير الصحيحة id وtitle فقط وتُرفض الهوية النصية دون إرسال HTTP.

وضع إعداد الطلب عند حد مقصود

تحقن الخدمة HttpClient وتعيد Observable<unknown> لعنوان نسبي اصطناعي، وتحتاج provideHttpClient لا استيرادًا فقط. افحص الهوية وحلل النتيجة. قد يبدأ كل اشتراك طلبًا جديدًا؛ فراقب التكرار. يلغي إلغاء الاشتراك التقدم العميل ولا يثبت التراجع عن عمل الخادم. تحتاج الكتابة سياسة إعادة وثبات نتيجة صريحة.

typescript خدمة نقل سياقية تحتاج provideHttpClient
import { Injectable, inject } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
@Injectable({ providedIn: "root" })
export class CourseApi {
  private readonly http = inject(HttpClient);
  load(id: number): Observable<unknown> {
    return this.http.get<unknown>(`/api/courses/${id}`);
  }
}

يمكن لاختبار HTTP معزول مهيأ رصد GET للعنوان، ولا يُشترك بالمقطع أو يُنفّذ أو يتصل بخادم.

تمثيل التحميل والفشل والإلغاء بصدق

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

استخدام حد اختبار HTTP بدل الخدمات الحقيقية

يوفر الاختبار العميل وخلفيته ويمسك الطلب ويعيد بيانات اصطناعية ويتأكد من غياب الزائد. ينبغي أن تستبدل خلفية الاختبار خلفية العميل بعد توفيره. اختبر جسم النجاح الفاسد والنقل والتكرار والأحدث. لا يثبت تجسس get التحليل أو العرض أو الشبكة. ميّز غياب الطلب والإلغاء من اكتمال الخادم. يبقى المحلل مفيدًا عند تغير النقل لأنه عقد قيم لا توافر عنوان.

الأخطاء الشائعة وإصلاحها

تحوي استجابة get<Course> هوية فاسدة.

لماذا يحدث؟
عومل النوع العام كتحليل فعلي.
كيف تصلحه؟
اطلب unknown وافحص الاستجابة.
كيف تتجنب تكراره؟
احفظ حالات تحليل سلبية.

عرض واحد يولد طلبات خلفية مكررة.

لماذا يحدث؟
للطلب البارد اشتراكات غير مقصودة.
كيف تصلحه؟
اختر حد استهلاك واحدًا أو مشاركة مقصودة.
كيف تتجنب تكراره؟
أكد العدد المتوقع باختبارات معزولة.

يتعذر حقن HttpClient.

لماذا يحدث؟
يغيب المزود المقصود عن التطبيق.
كيف تصلحه؟
وفر العميل عند الحد المدعوم.
كيف تتجنب تكراره؟
اختبر التوفير لا الاستيراد وحده.

اختبر فهمك

1. حلل الهوية صفرًا والعنوان الفارغ وحدّد النتيجتين ولماذا لا يصلحهما تأكيد نوع.

اعرض الحل المشروح

تعودان بـundefined؛ فالصفر غير موجب والعنوان فارغ. لا يغير التأكيد القيم. إن سمح العقد بهما فحدّث المخطط والاختبار، وإلا ارفضهما قبل افتراض المكوّن صحة Course.

2. أُلغي الاشتراك بعد مغادرة المستخدم. هل تدعي الواجهة تراجع حفظ بعيد؟

اعرض الحل المشروح

لا؛ قد يوقف الإلغاء المراقبة أو النقل وسبق للخادم التثبيت. عرّف هوية الكتابة والإعادة والتسوية والرسالة وفق API. اختبر التنظيف المحلي منفصلًا عن النتيجة الأصلية لا كتراجع موزع.

أهم ما تعلمته

  • يختلف نوع النقل من فحص البيانات.
  • للاشتراك والإلغاء آثار.
  • اختبر باستجابات اصطناعية لا خدمات حقيقية.

المراجع الرسمية