معالجة الأخطاء غير المتزامنة في Composables
استخدام try/catch في Composables غير المتزامنة، وكشف حالة الخطأ، ومنطق إعادة المحاولة في useFetch
معالجة الأخطاء غير المتزامنة في Composables درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
الأخطاء في composables غير المتزامنة
تحتاج composables التي تجلب البيانات أو تنفذ عملًا غير متزامن إلى استراتيجية أخطاء خاصة بها. يتمثل النمط في إتاحة مرجع error حتى تتمكن المكونات المستهلكة من الاستجابة، مع التقاط الدالة غير المتزامنة لحالات الفشل داخليًا.
إتاحة مرجع error
أعد مرجع error إلى جانب البيانات وحالة التحميل. وتراقبه المكونات المستهلكة لعرض الرسائل.
function useApi() {
const data = ref(null);
const error = ref(null);
return { data, error };
}استخدام try / catch في الدوال غير المتزامنة
داخل الدالة غير المتزامنة، ضع الاستدعاءات التي تستخدم await داخل try/catch، وخزّن حالة الفشل في مرجع الخطأ بدلًا من السماح بطرحها دون معالجة.
async function load() {
try {
data.value = await api.get();
} catch (e) {
error.value = e;
}
}إعادة ضبط حالة الخطأ
امسح الخطأ السابق في بداية كل محاولة، حتى لا تبقى الرسائل القديمة ظاهرة بعد نجاح إعادة المحاولة.
async function load() {
error.value = null;
try { /* ... */ } catch (e) { error.value = e; }
}مرجع retryCount
لدعم إعادة المحاولة، تتبع المحاولات باستخدام مرجع retryCount. زد قيمته في كل مرة يعيد فيها المستخدم المحاولة.
const retryCount = ref(0);
function retry() {
retryCount.value++;
load();
}منطق إعادة المحاولة التلقائية
يمكنك إعادة المحاولة تلقائيًا حتى حد معين، مع زيادة الفاصل الزمني بين المحاولات. توقف عندما يتجاوز العدد الحد الأقصى.
async function load() {
try {
data.value = await api.get();
} catch (e) {
if (retryCount.value < 3) {
retryCount.value++;
return load();
}
error.value = e;
}
}إعادة واجهة برمجة التطبيقات كاملة
وفّر البيانات والخطأ ودالة إعادة المحاولة وretryCount، حتى يمتلك المكون كل ما يحتاج إليه.
return { data, error, retry, retryCount };استهلاك الخطأ
في المكون، اعرض المحتوى بناءً على مرجع الخطأ، ووفّر زرًا لإعادة المحاولة موصولًا بالدالة المتاحة.
<p v-if="error">Failed: {{ error.message }}</p>
<button v-if="error" @click="retry">Retry</button>أخطاء composable مقابل المعالج العام
تُستخدم معالجة الأخطاء على مستوى composable مع حالات الفشل المتوقعة التي ينبغي للواجهة الاستجابة لها، مثل فشل طلب أو خطأ في التحقق. ويحدد المكون كيفية عرضها.
متى تتدخل الحدود العامة
يلتقط المعالج العام وحدود الأخطاء الأخطاء غير المتوقعة وغير المعالجة، مثل أخطاء البرمجة وتعطل العرض. إنها شبكة أمان وليست المعالج الأساسي لحالات الفشل غير المتزامنة المتوقعة.
اختيار الطبقة المناسبة
كقاعدة عامة: عالج الأخطاء غير المتزامنة المتوقعة داخل composable باستخدام مرجع خطأ، ودع الأخطاء غير المتوقعة حقًا تتصاعد إلى المعالج العام. وبذلك تبقى ملاحظات الواجهة محلية، بينما تظل الحماية من التعطل عامة.
تحقق سريع
أين ينبغي معالجة حالات الفشل غير المتزامنة المتوقعة، مثل فشل fetch؟
مراجعة
تعلمت أن composables غير المتزامنة تتيح مرجع error، وتستخدم try/catch في الدوال غير المتزامنة، وتدعم إعادة المحاولة باستخدام مرجع retryCount ودالة إعادة المحاولة، وأن الأخطاء على مستوى composable تعالج حالات الفشل المتوقعة، بينما يغطي المعالج العام الحالات غير المتوقعة.
الأسئلة الشائعة
هل درس «معالجة الأخطاء غير المتزامنة في Composables» مجاني؟
نعم — نص درس «معالجة الأخطاء غير المتزامنة في Composables» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «معالجة الأخطاء غير المتزامنة في Composables»؟
استخدام try/catch في Composables غير المتزامنة، وكشف حالة الخطأ، ومنطق إعادة المحاولة في useFetch تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «معالجة الأخطاء غير المتزامنة في Composables»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- خطاف دورة الحياة onErrorCaptured
- مكوّنات حدود الأخطاء
- app.config.errorHandler للأخطاء العامة
- معالجة الأخطاء غير المتزامنة في Composables