في التمرين السابق،
قمنا بتحديث خدمات تطبيقات Angular الخاصة بنا لاستخدام الوعود،
وكذلك تحديث المكونات
للتعامل مع الوعود التي يتم إرجاعها من قبل الخدمات.
في هذا التمرين، الذي يعد امتداداً للتمرين السابق،
سنقوم بمحاكاة تأخير زمني للوعد لحل.
وفي الممارسة السابقة،
كانت الوعود تحل على الفور.
ولكن في الحياة الحقيقية،
عندما تطلب بيانات من خدمة وتقدم الخدمة وعد،
والخدمة، بدورها،
تحتاج إلى الذهاب وجلب البيانات من خادم الخلفية،
وهذا سوف يستغرق وقتا طويلا.
لذلك، من أجل حل الوعد،
سيكون هناك قدر معين من التأخير الزمني.
الآن، كيف نتعامل مع هذا التأخير الزمني على الجانب المكون لدينا؟
كيف نبقي المستخدم على علم بحقيقة وجود
تأخير زمني قبل أن يتم جلب البيانات وإظهارها للمستخدم؟
كيف نتعامل مع التأخير نفسه?
الآن، في هذا التمرين،
سأقوم بمحاكاة تأخير الوقت باستخدام طريقة JavaScript داخل خدماتي،
ثم قم أيضًا بتحديث المكونات حتى تتمكن من إظهار رسالة للمستخدم باستخدام
مكون الدوار لتقدم المادة الزاوي لإظهار قرص دوار في
عرض القالب إلى إبقاء المستخدم
على علم بحقيقة أن البيانات يتم جلبها من الخادم،
وسنقدم في العرض بمجرد أن تصبح البيانات
متاحة للمكون عند حل الوعد.
دعونا نرى كيف يمكننا أن نفعل ذلك في هذا التمرين.
مرة أخرى، والعودة إلى خدمتي،
وهنا لدي خدمة طبق مفتوحة هنا.
و بدلا من أن نحل الوعد فورا,
سننفذ الآن و عدا ثم ندع
الوعد يتقرر بعد فترة و جيزة من الزمن.
لذلك، للقيام بذلك، لن يعمل هذا العزم الوعد
بعد الآن كما هو موضح هنا لذلك سأحذف ذلك.
بدلاً من ذلك، عندما يتم استدعاء طريقي،
ستعيد الطريقة وعدًا عن طريق إنشاء وعد جديد.
تتذكر أنه عندما قمت بإنشاء الوعد الجديد،
داخل الوعد سيكون لديك الوظيفة
بعزم ورفض كمعلمتين.
الآن، سأذهب فقط لاستخدام جزء العزم منه.
لذلك، سوف تنفيذ وظيفة داخل الوعد فقط باستخدام وظيفة السهم هنا. ول
ذلك, سأقول العزم,
و سأحاكي تأخير قصير لاتخاذ هذا القرار.
اسمحوا لي أن أكتب تعليقا.
محاكاة زمن وصول الخادم مع تأخير ثانيتين.
لذا، كيف يمكننا محاكاة هذا؟
لذلك، نستخدم طريقة setTimeout
المتوفرة في JavaScript.
لذلك، بالنسبة لطريقة setTimeout
، مرة أخرى، سأقوم بتنفيذ وظيفة السهم،
لا تحتوي طريقة setTimeout على أي معلمات نحتاجها هناك.
لذلك، عندما يتم تنفيذ هذا setTimeout،
فإنه سيتم حل تسليم DUSES.
لذلك، اسمحوا لي أن قطع هذه الأطباق ومن ثم لصقها في الأطباق.
لذلك، ترى أن هذه النتيجة تقوم الآن بإرجاع النتيجة هنا،
وسيتم إرجاع هذه النتيجة بعد تأخير ثانيتين هنا.
مع هذا التحديث، سيتم حل وعدنا الآن بعد ثانيتين.
لذا، فإن طريقة setTimeout المتاحة في JavaScript تحاكي تأخير قصير.
لذلك، كما ترون،
فإنه يحاكي التأخير القصير ويأخذ رد الاتصال هنا.
هذا الاستدعاء كما ترون،
لقد قمت بتطبيقه كدالة سهم هنا.
لذلك، لا توجد معلمات ثم عندما يحل هذا،
فإنه سيتم حل إرجاع DUSES والتأخير لذلك هو ثانيتين.
لذا، هذا الجزء هو الوظيفة،
وهذا هو التأخير الزمني الذي لدينا هنا.
لذا، الآن، وعدي سيحل بعد تأخير لمدة ثانيتين.
وبالمثل، دعونا تحديث الطريقتين المتبقيتين هنا.
لذلك، للقيام بذلك،
أنا فقط ذاهب لنسخ
ذلك الجزء ومن ثم ببساطة لصق ذلك في هناك،
وسوف تلاحظ أن تلك
الإرادة وأنا بحاجة إلى أن أقول 2000.
لذلك، يكمل طريقة setTimeout هناك.
الآن، سيكون لدينا
الأقواس الختامية يتبع.
وبالمثل، اسمحوا لي أن تحديث الطريقة الأخيرة أيضا.
لذلك، ترى أنه يحل DUSIS،
ثم بعد ثانيتين تأخير،
وإغلاق الطريقة إلى هناك.
هذا كل شيء لذلك، الآن يتم
تحديث خدمة طبق بلدي لحل جميع الوعود بعد ثانيتين تأخير.
الآن، وبالمثل، قم بتحديث خدمة القائد
وخدمة الترويج باستخدام نفس النمط الذي عرضته لك هنا.
الجزء الثاني من السؤال هو إبقاء المستخدم على علم بطريقة أو بأخرى
عن حقيقة أن هناك تأخير زمني المشاركة في الحصول على النتائج،
وبالتالي فإن العرض سيتم تحديث بمجرد الحصول على النتائج.
لقد رأيت هذا النوع من السلوك في العديد من التطبيقات،
بما في ذلك تطبيقات الجوال حيث سيكون لديك الدوار يظهر على الشاشة لإبقاء
المستخدم على علم بحقيقة أنه يتم تحميل شيء من وراء
الكواليس وعندما تصبح النتائج متاحة،
فإن العرض يتم تحديثه.
لذلك، سوف نستخدم نهجا مماثلا داخل مكوناتنا.
لمساعدتنا في هذا،
سوف نستخدم مكون الدوار التقدم من مادة الزاوي.
لذلك، لاستخدام مكون الدوار التقدم،
دعونا أولا انتقل إلى
ملف module.ts التطبيق ومن ثم استيراد وحدة الدوار التقدم في هناك.
لذلك، والذهاب إلى التطبيق module.ts.
سوف نذهب أولا هنا لاستيراد
MatProgressSpinnerModule من الزاوية/المادة/التقدم الدوار.
بمجرد استيرادنا هذا إلى الملف،
فإننا سوف نذهب إلى الديكور وحدة نانوغرام في الواردات،
ومن ثم إضافة في MatProgressSpinnerModule في ذلك.
بمجرد الانتهاء من هذا،
ثم يمكننا تحديث المكونات للاستفادة من الدوار التقدم.
لذلك هنا، سأعرض لكم مثالا من خلال
توضيح كيف يمكننا تحديث مكون القائمة لإظهار هذه المعلومات.
لذلك، انتقل إلى ملف تخطيط مكونات القائمة.
هنا، نرى أننا نعرض القائمة باستخدام قائمة الشبكة هنا.
لذا، ما سنفعله هو، لهذا div،
سأستخدم توجيه NGiF وأقول أنه يجب عرض هذا.
يجب عرض القائمة فقط عندما لا تكون الأطباق فارغة.
لذلك في البداية، في ملف البرنامج النصي لعلامة التبويب
المكونات، سترى أنه عندما تذهب إلى ملف البرنامج النصي لعلامة التبويب المكونات سترى أن
الأطباق الخاصة بك هو حاليا مجرد كائن غير معروف هنا،
وأنه سيتم تعيين الأطباق لقيمة الأطباق فقط عندما تحل المشاكل.
لذا، حتى تلك
النقطة، ستكون الأطباق قيمة غير محددة.
لذلك، يمكننا الاستفادة من
هذه الحقيقة، ومن ثم إعادة تصميم نموذجنا بحيث،
يمكننا أن نقول إظهار هذا div فقط إذا كانت الأطباق ليست غير محددة أو ليست كائن فارغ.
عندما يكون غير معروف،
ثم سأستخدم div الثاني هنا مع السمة المخفية المرتبطة به.
لذلك، كنت قد رأيت مخبأة يجري استخدامها من قبل.
لذلك، أنا ذاهب لاستخدام ذلك لتحديد الجذعية.
لذا، ما يعنيه هذا هو أنه إذا لم تكن الأطباق فارغة،
فسيتم إخفاء هذا div.
إذا كانت الأطباق فارغة،
فسيتم عرض هذا div.
لذلك، الآن ترى أن لديك اثنين من divs هنا.
سيتم عرض أول واحد إذا كانت الأطباق ليست صفيف طبق فارغ.
خلاف ذلك، سيتم عرض الجزء الثاني.
لذلك، مع هذا التغيير الصغير في قالب بلدي،
وأنا قادرة على إخفاء القائمة حتى النقطة التي مجموعة الأطباق يصبح متاحا لي،
وعندما تصبح مجموعة الأطباق المتاحة،
ثم سوف تظهر القائمة.
حتى تلك النقطة، أنا ذاهب لعرض الحصيرة الدوار.
وهو الدوار التقدم غير محدد
الذي يتوفر كعنصر مادة الزاوي.
لذلك، سوف يظهر هذا كدائرة الدورية في وجهة نظري،
لهذا المكون القائمة حتى النقطة التي يتم الحصول على النتائج،
عندما تحل المشاكل.
وبالإضافة إلى ذلك، وسوف تستخدم أيضا h4، وداخل h4،
وسوف أقول تحميل، يرجى الانتظار.
لذلك، ما يحدث هو أنه عندما لم يتم حل الأطباق بعد،
سيتم عرض الدوار وهذه الرسالة على الشاشة.
في اللحظة التي تصبح الأطباق متاحة عندما النتائج الموعودة،
ثم سيتم عرض القائمة على الشاشة.
الآن، سنفعل تحديثات مماثلة حول المكون،
مكون المنزل، ومكون تفاصيل الطبق أيضا. في
المقابل، سنقوم بتحديث خدمة الزعيم،
وخدمة الترويج أيضا لمحاكاة تأخير الوقت.
لذا، باستخدام النمط الذي قمت بتوضيحه لك للتو،
قم بتحديث الخدمات وكذلك القوالب المقابلة،
وسنرى النتيجة بعد الانتهاء من التحديث.
بعد إكمال تحديثات جميع الخدمات
والقوالب المقابلة للمكونات،
اسمحوا لي أن تشغيل بسرعة من خلال الملفات المحدثة هنا.
لذا، هذه خدمة القائد.
لذلك، يمكنك أن ترى أنه في خدمة الزعيم،
لقد قمت بتحديث GetLeaders لاستخدام setTimeout تماما كما فعلنا مع الأطباق،
و GetLeader و GetFeatureDLeader أيضا.
وبالمثل، في خدمة الترويج،
قمنا بتحديث معرف GetPromotions GetPromotion و GetFeatureDPromotion أيضا.
لذلك، يتم تحديث الخدمات الثلاث الآن
لتسبب تأخير الوقت قبل أن ترجع النتيجة.
الآن، من حيث القوالب،
قمنا بالفعل بتحديث قالب menu.Component.
دعونا ننظر إلى قوالب home.components.
لذلك، داخل home.component،
كنت أدرك أنه عندما قمنا بتصميم home.component،
كنا قد تكوين بالفعل بطاقات مع طبق نجمة NGiF.
لذلك، كل ما نحتاج إلى القيام به هو،
أسفل هنا نضيف ديف مع
مخفي وطبق هنا ولكن الدوار تماما كما فعلنا مع menu.component.
وبالمثل، من أجل الترويج، تحتوي بطاقة الحصيرة بالفعل على NGiF،
لذلك نحتاج فقط إلى إضافة هذا div الإضافي هنا مع الترويج الخفي هناك،
وكذلك للزعيم هنا أدناه.
وبالمثل، والذهاب إلى عنصر التفاصيل الطبق.
في مكون تفاصيل الطبق،
كان لدينا بالفعل قائمة مع طبق nGiF للتعليقات.
أيضا، طبق نجيف للبطاقة التي تعرض تفاصيل الطبق.
لذا، كل ما نحتاج إلى القيام به هو إضافة في هذا div الجديد مع الطبق المخفي هنا،
و div الدوار في مكانه.
وبالمثل، في المكون حول،
عندما تذهب إلى العنصر حول،
سترى أن لدينا قادة الشركات هنا،
وكان لدينا بالفعل قائمة مع النجم NGiF مع القادة.
لذلك، كل ما نحتاج إلى القيام به هو إضافة في ديف مع
مخفي وقادة هنا مع الدوار في المكان. هذا كل شيء
يتم تحديث طلبنا الآن.
دعونا نلقي نظرة على التطبيق المحدث في المتصفح المقبل.
الذهاب إلى المتصفح،
سترى أنه عند محاولة تحميل في المكون الرئيسي،
وهناك فترة قصيرة من الزمن عندما ترى الدوار على
الشاشة قبل الحصول على تحميل البطاقات.
وبالمثل، عندما تذهب إلى القائمة. كومبوننت،
سترى الدوار على الجانب الأيسر
لمدة ثانيتين قبل أن يتم تحديث القائمة الفعلية،
وعندما تذهب إلى طبق فردي أيضا ترى أن
الدوار على الشاشة قبل تقديم تفاصيل الطبق،
وفي حول مكون أيضا بالمثل, سترى أن,
سيكون لديك دائرة الغزل هناك قبل أن يتم تحديث معلومات الزعيم. في أي
وقت ننتقل إلى أي من هذه،
سترى تأخير قصير مماثل قبل أن يتم تحديث الالتهاب على الشاشة.
لذلك، مع هذا ترى كيف يمكنك التعامل مع التأخير في الحصول على النتائج،
أو تأخير في الوعد حل من جانب الخدمة داخل المكون الخاص بك
وإبقاء المستخدم على علم بحقيقة أن هناك
تأخير قصير قبل أن يتم تحديث الشاشة.
و هذا يكمل هذا التمرين.
في هذا التمرين، رأينا كيف يمكننا محاكاة تأخير قصير بوعودنا.
الحصول على حل من الخدمات،
ورأينا أيضا كيفية إبقاء المستخدم على علم باستخدام MD الدوار
مكونات المواد الزاوي لإظهار على الشاشة
لمدة عندما النتائج ليست متاحة بعد،
وهذا هو لمدة حتى يحصل على حل الوعد.
و هذا يكمل هذا التمرين.
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع الرسالة وعد الجزء الثاني.