Frontend Academy · درس

useFetch وuseAsyncData

اجلب البيانات من الخادم باستخدام useFetch وuseAsyncData، وتعامل مع حالتي الانتظار والخطأ، وافهم كيفية تنفيذ Nuxt لعملية hydration على العميل

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

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

يوفّر Nuxt اثنين من Composables الأساسيين لجلب البيانات: useFetch (يعتمد على URL ويستدعي fetch داخليًا) وuseAsyncData (يقبل أي دالة غير متزامنة، مع مفتاح فريد للتخزين المؤقت وإزالة التكرار).

useFetch — الطريقة السريعة

مرّر URL — يجلبه Nuxt أثناء SSR، ويجري تهيئته على العميل، ويمنع العميل من إعادة الجلب أثناء التهيئة.

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

<template>
  <div v-if="pending">Loading...</div>
  <div v-else-if="error">{{ error.message }}</div>
  <ul v-else>
    <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

لماذا لا يحدث جلب مزدوج أثناء التهيئة؟

يُسلسل Nuxt البيانات التي جُلبت داخل حمولة HTML الناتجة عن SSR. وعلى العميل، تُهيّئ useFetch نفسها من تلك الحمولة — فلا تحدث مكالمة شبكة ثانية. وهذا هو التحسين الأساسي لـ SSR.

useAsyncData — العمليات غير المتزامنة المرنة

استخدمه عندما لا يكون الجلب عبر URL بسيطًا — مثل استعلامات قاعدة البيانات، أو المنطق المخصّص، أو الطلبات متعددة الخطوات.

<script setup>
const { data: user } = await useAsyncData('user-profile', async () => {
  const me = await $fetch('/api/me');
  const stats = await $fetch(`/api/users/${me.id}/stats`);
  return { ...me, stats };
});
</script>

أهمية مفتاح التخزين المؤقت

الوسيط الأول لـ useAsyncData هو مفتاح تخزين مؤقت فريد. ويؤدي استخدام المفتاح نفسه في مكوّنات متعددة إلى إزالة التكرار وإعادة استخدام النتيجة. أما المفاتيح المختلفة فتعني عمليات جلب مستقلة.

// Two components calling useFetch('/api/posts') share one request
// Two components calling useFetch('/api/posts', { key: 'a' }) and { key: 'b' } fetch twice

التحديث والتحميل الكسول

يعيد كلا الـComposableَين refresh() للجلب من جديد، ويقبلان { lazy: true } لتجاوز حجب SSR (إذ تُحمَّل البيانات بعد تصيير الصفحة).

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

async function onSave() {
  await $fetch('/api/posts', { method: 'POST', body: newPost });
  await refresh();
}

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

المراقبة وعناوين URL التفاعلية

مرّر دالةً إلى URL — فسيصبح تفاعليًا. ويُعاد الجلب عند تغيّر التبعيات.

<script setup>
const page = ref(1);
const { data } = await useFetch(() => `/api/posts?page=${page.value}`);
// Changing page.value re-runs the fetch
</script>

خيارات الطلب

يقبل useFetch الخيارات نفسها التي يقبلها fetch — مثل method وbody وheaders — إضافةً إلى خيارات خاصة بـ Nuxt مثل default وtransform.

const { data } = await useFetch('/api/posts', {
  method: 'POST',
  body: { title: 'Hello' },
  headers: { 'X-Custom': '1' },
  transform: (raw) => raw.items.map(transformItem),
  default: () => []
});

$fetch — الجلب الإجرائي

$fetch هو أداة الجلب العامة في Nuxt (ويستخدم ofetch داخليًا). ولا يتتبع التهيئة تلقائيًا. استخدمه في معالجات الأحداث وعمليات التعديل.

async function deletePost(id) {
  await $fetch(`/api/posts/${id}`, { method: 'DELETE' });
  await refresh();
}

معالجة الأخطاء

ارمِ خطأً داخل معالج الجلب لإظهاره. ويمكن للصفحات عرض صفحة خطأ مخصّصة باستخدام ~/error.vue.

// error.vue at project root
<script setup>
const props = defineProps<{ error: any }>();
</script>

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <p>{{ error.message }}</p>
    <button @click="clearError({ redirect: '/' })">Home</button>
  </div>
</template>

المصادقة وملفات تعريف الارتباط

يمرّر useFetch ملفات تعريف الارتباط تلقائيًا أثناء SSR، لذا تعمل الطلبات الموثّقة على الخادم والعميل من دون معالجة يدوية لملفات تعريف الارتباط.

useFetch مقابل useAsyncData — متى؟

useFetch: للطلبات البسيطة المعتمدة على URL (وهي الحالة الأكثر شيوعًا بنسبة 95%). useAsyncData: للمنطق غير المتزامن المخصّص، والتركيب متعدد الخطوات، والمصادر غير المعتمدة على URL (مثل قاعدة البيانات عبر server/utils).

تحقق سريع

لماذا يمنع useFetch في Nuxt 3 حدوث طلب شبكة مكرر عند تهيئة الصفحة على العميل؟

مراجعة: useFetch وuseAsyncData

useFetch: الحالة المعتادة المعتمدة على URL، وتمثل 95% من الاستخدامات. useAsyncData: منطق async مخصص مع مفتاح cache فريد. يستفيدان كلاهما من حمولة SSR لإعادة تهيئة البيانات (من دون إرسال طلب مزدوج). استخدم refresh() لإعادة جلب البيانات، وlazy:true لتجاوز حجب SSR. تؤدي عناوين URL التفاعلية إلى إعادة الجلب. استخدم $fetch للتعديلات imperative. يتولى error.vue معالجة الأخطاء. تُمرَّر ملفات تعريف الارتباط تلقائيًا أثناء SSR.

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

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

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

ماذا ستتعلم في «useFetch وuseAsyncData»؟

اجلب البيانات من الخادم باستخدام useFetch وuseAsyncData، وتعامل مع حالتي الانتظار والخطأ، وافهم كيفية تنفيذ Nuxt لعملية hydration على العميل تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

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

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

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

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

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

← العودة إلى Frontend Academy