التحقّق من الصحة غير المتزامن (Async Validations)

الدرس 9 من 21 · دورة TanStack Form الكاملة · 4 دقيقة و35 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

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

الفرع: validation-3

[00:01] أن تملك أيضًا تحقّقات غير متزامنة (asynchronous) كذلك. فغالبًا، في أكثرية الأوقات، ستكون تحقّقاتنا من النوع المتزامن.

[00:07] غير أنّه أحيانًا — كي نتحقّق من حقل ما — قد نحتاج إلى فعل شيء غير متزامن، مثل إرسال طلب شبكي (network request) مثلاً. فلنأخذ مثالًا. وبالمناسبة، أيّ شيء سنجريه هنا يمكن

[00:18] أن يُجرى إمّا على مستوى الحقل وعلى مستوى النموذج كذلك. غير أنّه فلنلتزم ربما بمستوى الحقل. لكن ضع في ذهنك أنّ أيّ شيء سنجريه يمكن إجراؤه على مستوى النموذج كذلك. فسألغي التعليق (uncomment) عن هذه

[00:30] ولنذهب إلى تلك الموجودة في validators على مستوى النموذج، ولنحذفها ربما كي نتجنّب أيّ الالتباس. فالآن لدينا validators في حقل firstName فقط. فأيّ دالة تحقّق نمرّرها

[00:45] هنا إلى validators مثل onChange وonBlur وما إلى ذلك يمكن أن تمتلك نسخة غير متزامنة (async). فلدينا onChangeAsync وonBlurAsync وما إلى ذلك. ويمكننا امتلاك الاثنين كذلك، فنمتلك مثلاً onChange حيث نجري بعض

[00:59] التحقّق المتزامن مثل هذا. ويمكننا أيضًا أن نمتلك في الوقت نفسه onChangeAsync. فربما بدلًا من إنشاء واحدة جديدة، فلنغيّر onBlur هذه إلى onChangeAsync.

[01:10] ولنقل إنّنا نفعل هنا شيئًا غير متزامن. فأولًا لنجعل هذه الدالة async.

[01:18] ولنحاكِ هنا أنّنا نقوم بعمل شيء غير متزامن. سأرسل مجرد طلب إلى هذه الواجهة البرمجية الوهمية (dummy API)، وأضيف أيضًا بعض التأجيل كي أُحاكي فقط أنّ هذا يستغرق بعض الوقت.

[01:29] إذًا أضيف هنا setTimeout بمدّة 2 ثانية مثلًا. فما سيحدث الآن أنّ onChange سيعمل أولًا؛ فإذا أخفق — إذا أخفق التحقّق من الصحة هنا — فسنحصل على هذا الخطأ، وهذا لن

[01:43] يعمل في المقام الأول.

[01:46] غير أنّه إذا نجح هذا، فسيعمل الآخر، وهو غيرُ المتزامن. وإذا أحببت تغيير هذا السلوك وتشغيل غير المتزامن دائمًا، يمكننا تمرير خيار هنا وهو asyncAlways، وهو الذي سيعمل

[02:01] التحقّق غير المتزامن حتى لو لم يجتز التحقّق المتزامن. لكن سأحافظ على السلوك الافتراضي حيث: إذا أخفق الأول، لن يعمل الثاني؛ وإذا لم يخفق الأول، فسيعمل الثاني. ولن

[02:13] جرّبه الآن بفتح — فلنفتح ربما طلبات الشبكة (network) كي نرى طلبنا وهو يُرسَل.

[02:22] إذًا الآن سأكتب شيئًا هنا.

[02:25] والآن بما أنّ لدينا خطأً، فلم يعمل هذا. غير أنّه إن لم نمتلك خطأً فيعمل الطلب الشبكي كما ترى هنا. وبما أنّ لدينا هذا onChange، فسيعمل في كلّ مرّة نغيّر فيها مدخِلنا. و

[02:39] قد يكون ذلك مشكلة: كلّ مرّة نكتب فيها شيئًا في حقل الإدخال، تُرسَل إحدى طلباتٍ شبكية، وهذا — على الأرجح — ليس ما تحتاج إليه. سأمسح هذه — ولدينا أيضًا خيار المُباعدة (debounce) في هذه الدالة

[02:53] onChangeAsync. فنستطيع المُباعدة (debounce) دالتنا بطريقتَين: أولًا من مكوّن الحقل (field component) يمكننا تمرير asyncDebounceMs هذا.

[03:02] لنجعله 500 مِلّي ثانية مثلًا. وهذا سيُطبّق المُباعدة على أيّ دالة لدينا هنا — أيّ دالة تحقّق غير متزامنة: onChangeAsync وonBlurAsync وما إلى ذلك. غير أنّه يمكننا أن نكون أدقّ، وبدلًا من هذا الخيار

[03:16] من داخل validators يمكننا تمرير خيارات المُباعدة لكلّ دالة على حدة.

[03:21] إذًا لدينا onChangeAsyncDebounceMs.

[03:24] ويمكننا كذلك امتلاك onBlurAsyncDebounceMs وما إلى ذلك. فلنستخدم ربما هذا الخيار، ونضبطه على 500 ونحفظ. والآن فلنمسح تبويب الشبكة لدينا، وفلنجري تحديثًا.

[03:37] وبينما نكتب هنا، لن تُرسَل أيّ طلبات في حال توقفنا عن الكتابة لمدّة 500 مِلّي ثانية. فكما ترى هنا، نملك طلبًا واحدًا فحسب. وبعد التأجيل ذا الثانيتين الذي لدينا هنا، سنحصل على خطأ التحقّق: Your name must

[03:52] be John. فلنجرب ربما أن نكتب John هنا؛ ولا يُفترض أن نجد أيّ أخطاء.

[03:59] إذا كتبنا شيئًا بعد ثانيتَين، فينبغي أن نحصل على الخطأ. وأخيرًا لدينا أيضًا علم (flag) في المعلومات الوصفية (meta) لحقلنا. فلنتذكّر ربما المعلومات التي نملكها هنا، فلنجلبها من جديد. نملك هذا

[04:15] العلم هنا هو isValidating، وهو سيكون true عندما يكون لدينا حاليًا تحقّق من الصحة غير متزامن قيد التنفيذ. فلنجرب أن نكتب شيئًا. وكما ترى، تكون true. وعندما ينتهي الطلب، تُعاد false. إذًا يمكنك

[04:29] أن تستخدم هذا لعرض نوعٍ ما من دوّار التحميل (spinner) عندما يكون لديك تحقّق غير متزامن قيد التشغيل حاليًا. ففي