حل الوعود في قوالب Svelte

تعرف على كيفية العمل مع الوعود في قوالب Svelte

تعد الوعود أداة رائعة لدينا تحت تصرفنا للعمل مع الأحداث غير المتزامنة في JavaScript.

الإدخال الحديث نسبيًا لـawaitبناء الجملة في ES2017 جعل باستخدام الوعود أبسط.

يوفر لنا Svelte ملف{#await}بناء الجملة في القوالب للعمل مباشرة مع الوعود على مستوى القالب.

يمكننا انتظار الوعود لحلها ، وتحديد واجهة مستخدم مختلفة لحالات الوعد المختلفة: لم يتم حلها ، وتم حلها ، ورفضها.

وإليك كيف يعمل. نحدد الوعد ، ونستخدم{#await}كتلة ننتظر حتى يتم حلها.

بمجرد أن يتم حل الوعد ، يتم تمرير النتيجة إلى{:then}منع:

<script>
  const fetchImage = (async () => {
    const response = await fetch('https://dog.ceo/api/breeds/image/random')
    return await response.json()
  })()
</script>

{#await fetchImage} <p>…waiting</p> {:then data} <img src={data.message} alt=“Dog image” /> {/await}

يمكنك اكتشاف رفض الوعد عن طريق إضافة{:catch}منع:

{#await fetchImage}
  <p>...waiting</p>
{:then data}
  <img src={data.message} alt="Dog image" />
{:catch error}
  <p>An error occurred!</p>
{/await}

قم بتشغيل المثال:https://svelte.dev/repl/70e61d6cc91345cdaca2db9b7077a941

تحميل مجانيكتيب Svelte


المزيد من البرامج التعليمية svelte: