انتقل إلى المحتوى:

• حول كتلة #انتظار في svelte
• تشغيل (تشغيل) دالة عندما تقوم كتلة #await بحل أو رفض
• إصلاح غير محدد أو أي نص تم إرجاعه يظهر في المتصفح
  • 1. الطريقة الأولى (إرجاع السلاسل الفارغة):
  • 2. الطريقة الثانية (إخفاء النص الذي تم إرجاعه من الوظيفة في واجهة المستخدم باستخدام CSS.)
    • ملاحظة: هل تحتاج إلى استخدام SvelteKit Dev؟ اتصل بي

عن كتلة #انتظر في سفلتي

تعتبر الكتلة #await في svelte مفيدة جدًا للتعامل مع البيانات غير المتزامنة:

{#await data.myPromise}



{:then results}

{#each results as result}

{error?.message ?? "Something went wrong"}

هذه هي الطريقة الأساسية التي تعمل بها كتلة #await في شكل svelte. يعرض محتوى مختلفًا بناءً على حالة الوعد: مؤشر التحميل أثناء الانتظار، والنتائج عند الحل، ورسالة خطأ في حالة الرفض.

ولكن لنفترض أنني أريد تشغيل وظيفة معينة عند حل الوعد أو رفضه (مثل النخب).

قم بتشغيل (تشغيل) دالة عندما يتم حل الكتلة #await أو رفضها

إليك كيفية تشغيل وظائف محددة عند حل الوعد أو رفضه:

{#await data.myPromise}



{:then results}

{showSuccess(results.length)}

  
{#each results as result}

{error?.message ?? "Something went wrong"}

الآن، سيتم تشغيل وظيفتنا عند الوصول إلى كتلة التعليمات البرمجية.

• يتم استدعاء showSuccess عندما يتم حل الوعد، مع استخدام عدد النتائج كوسيطة.
• يتم تشغيل showError في حالة رفض الوعد، مما يؤدي إلى عرض رسالة خطأ مخصصة.

ولكن هناك شيء آخر...

إصلاح غير محدد أو أي نص تم إرجاعه يظهر في المتصفح

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

هذا غير منطقي بالنسبة للمستخدم النهائي ?‍♂️?‍♀️

لذا، تأكد من إرجاع سلاسل فارغة، أو لف الدالة في كتلة مخفية:

1. الطريقة الأولى (إرجاع السلاسل الفارغة):

في هذه الطريقة، سنتأكد من إرجاع سلاسل فارغة من وظائفنا.

{#await data.myPromise}
  


{:then results}

{showSuccess(results.length)} 


{#each results as result}

{error?.message ?? "Something went wrong"}

سيؤدي هذا إلى التأكد من إرجاع السلاسل الفارغة.

--- أو ---

2. الطريقة الثانية (إخفاء النص الذي تم إرجاعه من الوظيفة في واجهة المستخدم باستخدام CSS.)

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

{#await data.myPromise}
  


{:then results}
 
  

{showSuccess(results.length)}



{#each results as result}