الدرس 7 من 8

إلغاء الطلب القديم

هدف الدرس

تظهر نتائج آخر بحث فقط

01

الشرح

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

أمّا AbortController فيلغي الطلب نفسه وليس انتظارك له فقط، إذ تمرّر signal إلى fetch، وحين تستدعي abort() يُرفض الطلب بخطأ اسمه AbortError، فألغِ الطلب السابق قبل كل طلب جديد.

والإلغاء قرار اتّخذته أنت وليس فشلًا، فلا تعرضه على المستخدم كأنه خطأ، بل تجاهل AbortError وحده واترك الأخطاء الأخرى تظهر. ولاحظ أن المتحكّم (controller) لا يُستعمل إلا مرّة واحدة، فأنشئ متحكّمًا جديدًا لكل طلب.

02

المطلوب

كلّما كتب المستخدم في #q ألغِ الطلب السابق، ومرّر signal الخاصّ بالطلب الجديد إلى api، وتجاهل AbortError، حتى لا يظهر في #out إلا ردّ آخر بحث.

الفحوص

4 فحوص
  1. البحث الواحد يصل كالمعتاد
  2. الردّ القديم لا يكتب فوق الأحدث
  3. الطلب السابق يُلغى فعلًا ولا يُتجاهل فقط
  4. الإلغاء لا يظهر للمستخدم كأنه خطأ
03

تلميحات

0/3
دروس المسارأتممت 0 من 8

تتعلّم هنا قراءة JSON وانتظار ردّ الخادم والتعامل مع حالات التحميل والفشل، وهذا ما يفرّق بين نموذج تجريبي ومنتج يعتمد عليه الناس.

مستواه متوسّط، وفيه 8 دروس مجموع مدّتها ساعتان.

index.html
المعاينة
index.html100%
–/4

اضغط «تشغيل وتصحيح» ليبدأ الفحص.

تجد 4 فحوص في بطاقة «المطلوب».

دروس المسارأتممت 0 من 8

تتعلّم هنا قراءة JSON وانتظار ردّ الخادم والتعامل مع حالات التحميل والفشل، وهذا ما يفرّق بين نموذج تجريبي ومنتج يعتمد عليه الناس.

مستواه متوسّط، وفيه 8 دروس مجموع مدّتها ساعتان.