0Pricing
Vue Academy · درس

جلب البيانات: useFetch وuseAsyncData

‏useFetch() وuseAsyncData()، والجلب من الخادم مقابل العميل، وrefresh()، وحالة pending

جلب البيانات: useFetch وuseAsyncData درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

جلب البيانات في Nuxt

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

أساسيات useFetch

تغلّف useFetch عملية جلب عنوان URL. وتعيد قيمًا تفاعلية هي data وpending وerror، ويمكنكم استخدامها مباشرةً في القالب.

<script setup>
const { data, pending, error } = await useFetch('/api/posts')
</script>

عرض حالات التحميل والأخطاء

استخدم pending لحالة التحميل وerror لحالات الفشل. يحتفظ data ببيانات JSON التي جرى تحليلها.

<template>
  <p v-if="pending">Loading...</p>
  <p v-else-if="error">Failed to load</p>
  <ul v-else>
    <li v-for="p in data" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

استخدام useAsyncData للمنطق المخصص

عندما تحتاج إلى أكثر من عنوان URL عادي — مثل دمج الاستدعاءات أو تحويل النتائج — استخدم useAsyncData. فهو يتطلب مفتاحًا فريدًا ودالة لجلب البيانات.

const { data } = await useAsyncData('posts', () => {
  return $fetch('/api/posts')
})

أهمية المفتاح

يمنع المفتاح تكرار الطلب ويخزنه مؤقتًا. وعندما يستخدم مكونان المفتاح نفسه، فإنهما يشتركان في نتيجة واحدة واستدعاء شبكة واحد، مما يمنع عمليات الجلب المتكررة.

useFetch صياغة مختصرة

تحت الغطاء، يُعد useFetch(url) عمليًا useAsyncData مع مفتاح يُنشأ تلقائيًا ودالة جلب هي $fetch(url). استخدم useFetch مع عناوين URL البسيطة، وuseAsyncData مع دوال الجلب المخصصة.

التنفيذ على العميل فقط مع server:false

اضبط server: false لتخطي عملية الجلب أثناء SSR وتشغيلها على العميل فقط — وهذا مفيد للبيانات الخاصة بالمستخدم التي لا ينبغي أن تعيق العرض على الخادم.

const { data } = await useFetch('/api/me', {
  server: false
})

عمليات جلب كسولة وغير حاجبة

تحجب await عملية التنقل افتراضيًا حتى وصول البيانات. يتيح الخيار lazy (أو useLazyFetch) عرض الصفحة فورًا ثم ملء البيانات عند اكتمال جلبها.

const { data, pending } = useFetch('/api/posts', {
  lazy: true
})

إعادة الجلب باستخدام refresh

تعيد composables دالة refresh لتشغيل عملية الجلب عند الطلب — بعد إجراء تغيير أو النقر على زر.

const { data, refresh } = await useFetch('/api/posts')
function reload() { refresh() }

معلمات استعلام تفاعلية

مرّر query أو خيارات تفاعلية؛ وعندما تتغير قيمة ref خاضعة للمراقبة، تُعاد عملية الجلب تلقائيًا. اربط watch لإعادة الجلب عند تغير التبعيات.

const page = ref(1)
const { data } = await useFetch('/api/posts', {
  query: { page },
  watch: [page]
})

تحويل الاستجابة

يعيد الخيار transform تشكيل الاستجابة قبل وصولها إلى data — وهذا مفيد لاختيار الحقول التي تحتاج إليها فقط وتقليص الحمولة المرسلة إلى العميل.

const { data } = await useFetch('/api/user', {
  transform: (u) => ({ name: u.name, id: u.id })
})

اختبار سريع

اختبر معرفتك بجلب البيانات في Nuxt.

مراجعة

لقد تعلمت جلب البيانات في Nuxt:

  • يعيد useFetch بيانات تفاعلية وحالتي pending وerror.
  • يأخذ useAsyncData مفتاحًا بالإضافة إلى دالة جلب لتنفيذ منطق مخصص.
  • يشغّل server:false الجلب على العميل فقط، بينما يجعل lazy عملية الجلب غير حاجبة.
  • تعيد refresh() الجلب، بينما تعيد watch تشغيله عند تغير التبعية.

الأسئلة الشائعة

هل درس «جلب البيانات: useFetch وuseAsyncData» مجاني؟

نعم — نص درس «جلب البيانات: useFetch وuseAsyncData» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «جلب البيانات: useFetch وuseAsyncData»؟

‏useFetch() وuseAsyncData()، والجلب من الخادم مقابل العميل، وrefresh()، وحالة pending تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «جلب البيانات: useFetch وuseAsyncData»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. بنية مشروع Nuxt 3 والتوجيه المعتمد على الملفات
  2. جلب البيانات: useFetch وuseAsyncData
  3. مسارات خادم Nuxt ونقاط نهاية API
  4. أوضاع SSR وSSG وSPA
← العودة إلى Vue Academy